html - Bootstrap - Change rows and columns order -
using bootstrap possible have these 2 different layouts depending on viewport? i've been searching , i'm aware of concepts push, pull , responsive utilities examples i've found had simpler structures.
on case, rather not utilize responsive utilities (because there lots of repeated processing) and/or javascript, html , css manipulation.
here's fiddle wrong layout on smartphones...
<div class="row"> <div class="col-sm-4 ela">title a</div> <div class="col-sm-4 elb">title b</div> <div class="col-sm-4 elc">title c</div> <div class="col-sm-4 ela">graph a</div> <div class="col-sm-4 elb">graph b</div> <div class="col-sm-4 elc">graph c</div> <div class="col-sm-12 ela">list a</div> <div class="col-sm-12 elb">list b</div> <div class="col-sm-12 elc">list c</div> </div> tablets , desktops layout
smartphones layout
there 2 solutions without using javascript
first option:
the element list using responsive utilities classes
http://getbootstrap.com/css/#responsive-utilities
check example: http://jsfiddle.net/ppollono/mehfb6p0/12/
for list in first row
class="visible-xs" for list @ bottom
class="hidden-xs" conts: element list duplicated
second option:
use flex display
https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes
check example: http://codepen.io/palapas/pen/lvvbyw?editors=110
class="snippet-code-css lang-css prettyprint-override">.row { margin: 0px; padding: 0px; background: #999; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-flow: row wrap; flex-flow: row wrap; -webkit-justify-content: space-between; justify-content: space-between; } .row div { padding: 5px; margin: 5px; border: 1px solid #000; border-radius: 3px; width: 100%; } .ela { background-color: #e99048; } .elb { background-color: #b0c07e; } .elc { background-color: #b0b9dc; } @media (min-width: 768px) { .row .et { -webkit-order: 1; order: 1; width: 30%; } .row .eg { -webkit-order: 2; order: 2; width: 30%; } .row .el { -webkit-order: 3; order: 3; } } class="snippet-code-html lang-html prettyprint-override"><div class="row"> <div class="et ela">title a: integer et fermentum leo. in sollicitudin arcu eget nisi pretium.</div> <div class="eg ela">graph a: integer et fermentum leo. in sollicitudin arcu eget nisi pretium, viverra rutrum neque malesuada. cras maximus nibh quis ex varius feugiat. ut nec arcu nunc. </div> <div class="el ela">list <br> <ul> <li>sed adipiscing ornare risus. morbi est est, blandit sit down amet, sagittis vel, euismod vel, velit. pellentesque egestas sem. suspendisse commodo ullamcorper magna.</li> <li>nulla sed leo. class aptent taciti sociosqu advertisement litora torquent per conubia nostra, per inceptos himenaeos.</li> <li>fusce lacinia arcu et nulla. nulla vitae mauris non felis mollis faucibus.</li> <li>lorem ipsum dolor sit down amet, consectetuer adipiscing elit. donec odio. quisque volutpat mattis eros. nullam malesuada erat ut turpis. suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</li> <li>donec nec justo eget felis facilisis fermentum. aliquam porttitor mauris sit down amet orci. aenean dignissim pellentesque felis.</li> <li>morbi in sem quis dui placerat ornare. pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. sed arcu. cras consequat.</li> <li>praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, european union vulputate magna eros european union erat. aliquam erat volutpat. nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</li> <li>phasellus ultrices nulla quis nibh. quisque lectus. donec consectetuer ligula vulputate sem tristique cursus. nam nulla quam, gravida non, commodo a, sodales sit down amet, nisi.</li> <li>pellentesque fermentum dolor. aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</li> </ul> </div> <div class="et elb">title b: integer et fermentum leo. </div> <div class="eg elb">graph b</div> <div class="el elb">list b <br> <ul> <li>morbi in sem quis dui placerat ornare. pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. sed arcu. cras consequat.</li> <li>praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, european union vulputate magna eros european union erat. aliquam erat volutpat. nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</li> <li>phasellus ultrices nulla quis nibh. quisque lectus. donec consectetuer ligula vulputate sem tristique cursus. nam nulla quam, gravida non, commodo a, sodales sit down amet, nisi.</li> <li>pellentesque fermentum dolor. aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</li> <li>sed adipiscing ornare risus. morbi est est, blandit sit down amet, sagittis vel, euismod vel, velit. pellentesque egestas sem. suspendisse commodo ullamcorper magna.</li> <li>nulla sed leo. class aptent taciti sociosqu advertisement litora torquent per conubia nostra, per inceptos himenaeos.</li> <li>fusce lacinia arcu et nulla. nulla vitae mauris non felis mollis faucibus.</li> <li>lorem ipsum dolor sit down amet, consectetuer adipiscing elit. donec odio. quisque volutpat mattis eros. nullam malesuada erat ut turpis. suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</li> <li>donec nec justo eget felis facilisis fermentum. aliquam porttitor mauris sit down amet orci. aenean dignissim pellentesque felis.</li> <li>morbi in sem quis dui placerat ornare. pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. sed arcu. cras consequat.</li> <li>praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, european union vulputate magna eros european union erat. aliquam erat volutpat. nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</li> <li>phasellus ultrices nulla quis nibh. quisque lectus. donec consectetuer ligula vulputate sem tristique cursus. nam nulla quam, gravida non, commodo a, sodales sit down amet, nisi.</li> <li>pellentesque fermentum dolor. aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</li> <li>sed adipiscing ornare risus. morbi est est, blandit sit down amet, sagittis vel, euismod vel, velit. pellentesque egestas sem. suspendisse commodo ullamcorper magna.</li> <li>nulla sed leo. class aptent taciti sociosqu advertisement litora torquent per conubia nostra, per inceptos himenaeos.</li> <li>fusce lacinia arcu et nulla. nulla vitae mauris non felis mollis faucibus.</li> </ul> </div> <div class="et elc">title c: integer et fermentum leo. in sollicitudin arcu eget nisi pretium, viverra rutrum neque malesuada. cras maximus nibh quis ex varius feugiat.</div> <div class="eg elc">graph c</div> <div class="el elc">list c <br> <ul> <li>morbi in sem quis dui placerat ornare. pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. sed arcu. cras consequat.</li> <li>praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, european union vulputate magna eros european union erat. aliquam erat volutpat. nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</li> <li>phasellus ultrices nulla quis nibh. quisque lectus. donec consectetuer ligula vulputate sem tristique cursus. nam nulla quam, gravida non, commodo a, sodales sit down amet, </ul> </div> </div>
conts: not supported ie9 , below http://caniuse.com/#feat=flexbox
html css twitter-bootstrap
No comments:
Post a Comment