CODEWITHSUNDEEP
csstwitter-bootstrapresponsive-designweb
Ashutosh Shrestha
Ashutosh Shrestha

Reputation: 140

How do I use Bootstrap Responsive Utilities to position div's differently in different screen size?

i want to change the orientation of the col in small screen so i took the help of bootstrap Responsive utilities 

        <div class="row">
          <div class="col-md-4 hidden-sm hidden-xs">
            <h3>News title will go here with short description</h3>
             <p>Lorem Ipsum is simply dummy text of the printing and    typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</p>
            <a href="#" class="read-more-btn">Read more <span class="read-more-btn-symbol">&#187;</span></a>
          </div>
          <div class="col-md-8 hidden-sm hidden-xs ">
            <img class="img-responsive" src="images/mid2.jpg">
          </div>

          <div class="col-md-8 visible-sm visible-xs">
            <img class="img-responsive" src="images/mid2.jpg">
          </div>
          <div class="col-md-4 visible-sm visible-xs ">

            <h3>News title will go here with short description</h3>
               <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</p>
            <a href="#" class="read-more-btn">Read more <span class="read-more-btn-symbol">&#187;</span></a>
          </div>
        </div><hr>

but i dont want to write the same line twice and add different responsive classes ? how do i fix this without writing the same thing twice

Upvotes: 0

Views: 50

Answers (2)

Jordi Vicens
Jordi Vicens

Reputation: 772

<div class="row">
  <div class="col-md-4">a</div>
  <div class="col-md-8">b</div>
  <div class="col-md-8">b</div>
  <div class="col-md-4">a</div>
</div><hr>

I try it with the last version of bootstrap and it works.

But I prefer work in separate divs with class="row".

Upvotes: 1

neophyte
neophyte

Reputation: 6626

You can add classes in the same line like this--

<div class="col-md-4 col-lg-4 col-sm-4 col-xs-4 hidden-sm hidden-xs"></div>

Then wrap all the div's inside it

Hope this helps!

Upvotes: 0

Related Questions