在移动设备上移动图像

时间:2016-01-13 17:08:33

标签: jquery html css twitter-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>

1 个答案:

答案 0 :(得分: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>