If you open Unminified CSS for Bootstrap, which is the second best way to learn how to use the framework, the first of which will be LESS and / or SCSS, you will see that push and pull work within 12 columns, not full-width elements. These classes only change the relative position on the left or right.
.col-sm-push-8 { left: 66.66666667%; } .col-sm-pull-4 { right: 33.33333333%; }
When you open LESS mixins for a grid, you will see that they did not remove col-12-X from push and pull or offsets, but they are not used.
Bootstrap is not CSS, it is a framework that uses CSS. It does not provide a solution for each build script or class for each situation. GetBootstrap.com itself, all storefront sites, and almost every theme or site supported by Bootstrap on the planet use custom CSS. You really need to learn CSS to make the most of frames.
Another way supported by current and obsolete browsers is to use display: table on the parent and display: table-caption for the child you want to change. See the answer here dfsq
fooobar.com/questions/979161 / ...
Make sure your images have a width of: 100% on them (see css example) if you are going to use responsive images with a display: table as maximum width: 100% does not work with images inside tables.
The modern, modern CSS-only approach is to use flexbox to place the elements in the order you want at a given breakpoint using media queries. flexbox is supported in modern browsers.
http://caniuse.com/#feat=flexbox - see current support
Another way is to use jQuery insertBefore or insertAfter (whatever is required) when resizing / loading.
All of the above methods are client-side.
Another way, and my preferred way when the content is complicated, is to use server-side code (e.g. php-mobile-detect) and serve a completely different html when such a need arises, especially if the content is inappropriate (e.g. for large images ) for a small device.
Table Signature Example
HTML:
<h2>Table Caption</h2> <div class="table-wrap"> <section class="content-Y"> <h2>A</h2> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p> </section> <section class="content-X"> <h2>B</h2> <form action="#" method="post" role="form"> <div class="form-group"> <label for="name">Text Input:</label> <input type="text" name="name" class="form-control" id="name" value="" tabindex="1" /> </div> <div class="form-group"> <input type="submit" class="btn btn-default" value="Submit" /> </div> </form> </section> </div>
CSS
.content-X, .content-Y { border: 1px solid red; margin: 0 0 10px 0; } @media (min-width: 768px) { .table-wrap { display: table; } .table-wrap img {width:100%;height:auto;} .content-X { display: table-caption; } }
Flexbox Example
HTML
<h2>Flexbox</h2> <div class="flex-wrap"> <section class="content-2"> <h2>A</h2> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p> </section> <section class="content-1"> <h2>B</h2> <form action="#" method="post" role="form"> <div class="form-group"> <label for="name">Text Input:</label> <input type="text" name="name" class="form-control" id="name" value="" tabindex="1" /> </div> <div class="form-group"> <input type="submit" class="btn btn-default" value="Submit" /> </div> </form> </section> </div>
CSS
.content-1, .content-2 { border: 1px solid red; margin: 0 0 10px 0; } @media (min-width:768px) { .flex-wrap { display: -moz-box; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -moz-box-orient: vertical; -webkit-box-orient: vertical; -webkit-flex-flow: column; -ms-flex-direction: column; flex-flow: column; } .content-1 { -moz-box-ordinal-group: 1; -webkit-box-ordinal-group: 1; -webkit-order: 1; -ms-flex-order: 1; order: 1; } .content-2 { -moz-box-ordinal-group: 2; -webkit-box-ordinal-group: 2; -webkit-order: 2; -ms-flex-order: 2; order: 2; } }
JQuery example
HTML
<h2>jQuery InsertBefore</h2> <div class="content-A"> <h2>A</h2> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p> </div> <div class="content-B"> <h2>B</h2> <form action="#" method="post" role="form"> <div class="form-group"> <label for="name">Text Input:</label> <input type="text" name="name2" class="form-control" id="name" value="" tabindex="1" /> </div> <div class="form-group"> <input type="submit" class="btn btn-default" value="Submit" /> </div> </form> </div>
CSS
.content-A, .content-B { border: 1px solid red; margin-bottom: 10px; }
JQuery
$(window).on("resize", function() { if($(window).width() >= 768) { $(".content-B").insertBefore($(".content-A")); } else { $(".content-A").insertBefore($(".content-B")); } }).resize();
* Note: .col-xs-12 is not required when using the grid. Everything below the last minimum width will be 100% wide.
Full width elements do not require a mesh system; keep some extra wrappers. *