引导程序-平板电脑视图-文本/图像位置

Question

I'm using Boostrap. Is it possible to float my text to the right of my image on Tablet portrait orientation?

Here's what I have so far: https://jsfiddle.net/DTcHh/16710/

 /* Latest compiled and minified CSS included as External Resource*/ /* Optional theme */ @import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css'); body { margin: 10px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <div class="container"> <div class="row"> <div class="col-md-4 portfolio-item"> <a href="#"><img class="img-responsive" src="http://placehold.it/300x300" alt=""></a></p> <h4 class="service-heading">Formula 1</h4> <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore.</p> </p></div> <div class="col-md-4 portfolio-item"> <a href="#"><img class="img-responsive" src="http://placehold.it/300x300" alt=""></a></p> <h4 class="service-heading">Rugby</h4> <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore.</p> </p></div> <div class="col-md-4 portfolio-item"> <a href="#"><img class="img-responsive" src="http://placehold.it/300x300" alt=""></a></p> <h4 class="service-heading">Football</h4> <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore.</p> </p></div> </div> 

Right now, the text lies underneath at Desktop & Mobile, but I'd like at Tablet for it to sit to the right of the image.

Can anyone assist?

Answer 1

最好使用简单的CSS和媒体查询，而不是使用boostrap的典型类。此代码适用于您的屏幕尺寸最大为600px的宽度，这里是CSS

    @media screen & max-width(max-width: 600px) {float: left;margin-left:4%;} div p {float: right;margin-right: 4%;}}

Answer 2

Here is how you can do it.

col-xs

is what you need to add when you are in mobile view

<div class="container">

<div class="row">
<div class="col-md-4 col-xs-2 portfolio-item">
                <a href="#"><img class="img-responsive" src="http://placehold.it/300x300" alt=""></a></p>
 </div>
<div class="col-md-4 col-xs-2">
<h4 class="service-heading">Formula 1</h4>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit.......
</div>

Answer 3

OHH sorry..i mistyped. This one should work for tablet

 @media screen and (min-device-width: 481px) and (max-device-width: 800px)
{
.img-responsive {
float: left;
margin-left:4%;
} 
h4 {float: right;
margin-right: 4%;
margin-botttom: 2%;
}
 p {
float: right;
margin-right: 4%;}
}}