CODEWITHSUNDEEP
twitter-bootstrap
Hacker
Hacker

Reputation: 7906

Reverse the ways divs are displayed in mobile view

I have a view in desktop which looks like attached image. I am using bootstrap. I want the mobile view to look like the second image. How do i achieve it. If you see it dropdown come to the bottom. enter image description here

Desktop View

Mobile view

enter image description here

Upvotes: 0

Views: 750

Answers (3)

AngularJR
AngularJR

Reputation: 2762

Hacher Hi there. You could do it this way, with the hidden-xx classes.
Here is the Fiddle.

<div class="col-xs-12 col-sm-3 hidden-xs btn btn-success"><h3>Dropdown</h3></div>
<div class="col-xs-12 col-sm-3 btn btn-primary"><h3>Button</h3></div>
<div class="col-xs-12 col-sm-3 btn btn-primary"><h3>Button</h3></div>
<div class="col-xs-12 col-sm-3 btn btn-primary"><h3>Button</h3></div>  
<div class="col-xs-12 col-sm-3 hidden-sm hidden-md hidden-lg btn btn-success"><h3>Dropdown</h3></div>

enter image description here

You could also use a little jquery

Here is the Fiddle.
Just resize and hit run or refresh etc for it to change.

<div class="col-xs-12 col-sm-3 btn btn-success" id="first"><h3>Dropdown</h3></div>
<div class="col-xs-12 col-sm-3 btn btn-primary"><h3>Button</h3></div>
<div class="col-xs-12 col-sm-3 btn btn-primary"><h3>Button</h3></div>
<div class="col-xs-12 col-sm-3 btn btn-primary" id="last"><h3>Button</h3></div>
<script>   
   if ($(window).width() < 767) {
       $("#first").insertAfter("#last");
    } 
</script>

Upvotes: 2

ChaoticNadirs
ChaoticNadirs

Reputation: 2290

The correct way to do this is using Bootstrap's built in column ordering classes, .col-sm-push-* and .col-sm-pull-*

Docs: http://getbootstrap.com/css/#grid-column-ordering

Here's the code.

<div class="row">
  <div class="col-sm-3 col-sm-push-3">
    <button class="btn btn-primary">Button 1</button>
  </div>
  <div class="col-sm-3 col-sm-push-3">
    <button class="btn btn-primary">Button 2</button>
  </div>
  <div class="col-sm-3 col-sm-push-3">
    <button class="btn btn-primary">Button 3</button>
  </div>
  <div class="col-sm-3 col-sm-pull-9">
    <select class="form-control"></select>
  </div>
</div>

Demo: http://www.bootply.com/mHPiPxZ6YY

Upvotes: 1

Huy Hoang Pham
Huy Hoang Pham

Reputation: 4147

If you are using bootstraper 3.0 and up, you can add the pull-right class to each columns. Click "Full Page" to check the desktop view.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="pull-right col-md-3 col-xs-12">Button</div>
    <div class="pull-right col-md-3 col-xs-12">Button</div>
    <div class="pull-right col-md-3 col-xs-12">Button</div>
    <div class=" pull-right col-md-3 col-xs-12">Dropdown</div>
  </div>
<div>

Upvotes: 2

Related Questions