CODEWITHSUNDEEP
htmltwitter-bootstrapcsstwitter-bootstrap-3
DannySh
DannySh

Reputation: 1

Switch element positions with css from above to aside when using Bootstrap 3.0 griding

I'm using Bootstrap 3.0 with its grid system and have on my page two divs one above the other.

I want to let the users the ability to switch the view so these divs will be one aside the other (on clicking a button). Can I do it using only CSS3?

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-md-8 col-md-offset-2">
           <div class="alert alert-info">
               <!-- first div content-->
           </div>
           <div class="alert alert-info">
               <!-- second div content-->
           </div>
       </div>
   </div>
</div>

Upvotes: 0

Views: 79

Answers (1)

KZee
KZee

Reputation: 446

You can use input checkbox for control state and make lable as button. Checkbox must be placed before your code. In HTML:

<input type="checkbox" id="checkbox">
<label for="checkbox">It's button</label>
<div class="your_div">Your div</div>

Then you have two chunk of CSS:

#checkbox{ %unchecked state% }
#checkbox ~ .your_div{ %unchecked state% }

and

#checkbox:checked{ %checked state% }
#checkbox:checked ~ .your_div{ %checked state% }

Some time ago I test this trick http://codepen.io/KZee/pen/JdZeqv and it works perfect.

Upvotes: 1

Related Questions