jquery - 在移动设备上移动内容上方的图像

Question

目前我在 bootstrap 中为 media-object 使用默认的 css 我想知道如何在移动设备上实现音频低于图像的效果。

目前的情况。 Demo

我希望它看起来像什么。 Demo2

我当前的 HTML 是。

<div class="media">
   <a class="pull-left">    
      <img class="media-object" height="150" width="150" src="<?php $feat_image = wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); echo ''.$feat_image.''; ?>">  
   </a>
   <div class="media-body">
      <header class="section-header">
         <h2 itemprop="name"><a href="http://www.example.com/singles"><?php the_title(); ?></a></h2>
         <div class="stripe-dotted"></div>
      </header>
      <p><?php the_content(); ?></p>
   </div>
</div>

Answer 1

我不知道如何使用媒体对象。我会做的简单方法是只使用 cols。您可以让您的列大小在常规显示上随心所欲，然后在移动设备上确保它们都占据整个 12 列。

<div class="col-xs-12 col-md-6">
    image
</div>
 <div class="col-xs-12 col-md-6">
    title and controls
</div>