изменить расположение таблицы на небольших экранах

Question

на небольших устройствах мне нужно, чтобы изображение под изображением, которое находится в коде прямо перед этой строкой, в настоящее время отображается в соответствии с изображением .. Мне кажется, мне нужна таблица стек с изображением первого, а затем post.heading также я хотел бы <td><%= link_to post.heading, post %></td> быть обернуты/перерыв, когда он нуждается в новой линии

<div class="table-responsive"> 
<table class="table shrink table-striped"> 
..... 
<tbody> 
         <% @posts.each do |post| %> 
         <tr> 

          <td width="13%" height="120px"> 
          <% if post.images.empty? %> 
          <%= image_tag "http://s12.postimg.org/hqk7wkk4t/no_car_photo.gif", class: "thumbnail", class: "img-responsive" %> 
          <% else %> 
            <%= image_tag post.images.first.url, class: " img-responsive" %> 
          <% end %> 
          </td> 

          <td><%= link_to post.heading, post %></td> 

выход HTML является:

 <table class="table shrink table-striped"> 
     <thead> 
      <tr> 
      <th>Preview</th> 
      <th>Heading</th> 
      <th class= "hidden-xs">Price</th>     
      <th class= "hidden-xs">Make</th> 
      <th class= "hidden-xs">Model</th> 
      <th class= "hidden-xs">Year</th> 
      <th class= "hidden-xs">Mileage</th> 
      <th class= "hidden-xs">Transmission</th> 
      <th class= "hidden-xs">Title Status</th> 
      <!-- <th> Neighborhood</th> --> 
      <th class= "hidden-xs">Last Updated</th> 

      </tr> 
     </thead> 

     <tbody> 
      <tr> 

       <td width="13%" height="120px"> 
         <img alt="00r0r bdmpio6ljkp 600x450" class=" img-responsive" src="http://images.craigslist.org/00r0r_bdmpIO6lJkp_600x450.jpg" /> 
       </td> 

       <td class="col-xs-4"><a href="/posts/8732">2008 Jeep Liberty as low as of $500 Down and $296.00 per month</a></td> 

       <td class= "hidden-xs">$11,995</td> 
       <td class= "hidden-xs">Jeep</td> 
       <td class= "hidden-xs">Liberty</td> 
       <td class= "hidden-xs">2008</td> 
       <td class= "hidden-xs">71966</td> 
       <td class= "hidden-xs"></td> 
       <td class= "hidden-xs">clean</td> 
       <!--<td></td> --> 
       <td class= "hidden-xs">about 14 hours ago</td> 
      </tr> 
      <tr> 

Answer 1

<% @posts.each do |post| %> 
        <tr> 

         <td width="10%" height="100%"> 
         <% if post.images.empty? %> 
         <%= image_tag "http://s12.postimg.org/hqk7wkk4t/no_car_photo.gif", class: "thumbnail", class: "img-responsive" %> 
         <% else %> 
           <%= link_to (image_tag(post.images.first.url)), post, class: "img-responsive", class: "thumbnail" %> 
         <% end %> 
         </td> 

         <td class= "hidden-xs"><%= link_to post.heading, post %></td> 

       <td class= "hidden-xs"><%= number_to_currency(post.price, precision: 0) %></td> 
         <td class= "hidden-xs"><%= post.make %></td> 
         <td class= "hidden-xs"><%= post.model %></td> 
         <td class= "hidden-xs"><%= post.year %></td> 
         <td class= "hidden-xs"><%= post.mileage %></td> 
         <td class= "hidden-xs"><%= post.transmission %></td> 
         <td class= "hidden-xs"><%= post.title_status %></td> 
         <!--<td><%= post.neighborhood %></td> --> 
         <td class= "hidden-xs"><%= "#{time_ago_in_words (Time.at(post.timestamp.to_i))} ago" %></td> 
        </tr> 
        <% end %> 
       </tbody> 
       </table> 
     </div>