css - 更改小屏幕上的表格布局

Question

在小型设备上，我需要 <td><%= link_to post.heading, post %></td>出现在该行之前代码中的图像下方...目前它显示与图像一致..我想我需要先将表格与图像堆叠然后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>