Is it feasible to rearrange the sequence of full width columns in Bootstrap v3? Take into account...
-xs (A and B both assigned col-xs-12)
[ A ]
[ B ]
-sm (A and B both designated col-sm-12)
[ B ]
[ A ]
I am aware of the option to use hide/show methods, but I prefer not to duplicate content since both A and B contain a significant amount of dynamically generated content, which could potentially slow down the page. Thank you.
Try incorporating Bootstraps' .col-md-push-* and .col-md-pull-* classes into your layout.
To learn more about this, visit: http://getbootstrap.com/css/#grid-column-ordering
Here is an example:
<div class="container">
<div class="row">
<div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
<div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>
</div>
If you need a full width column example using push/pull helper classes, check out this JS bin:
<div class="row">
<div class="col-xs-12 col-sm-6 col-sm-push-6">
<p>test2</p>
</div>
<div class="col-xs-12 col-sm-6 col-sm-pull-6">
<p>test1</p>
</div>
</div>
https://jsbin.com/gazipa/2/edit?html,css,output
You can also utilize CSS transform to alter the order at a specific viewport breakpoint:
@media (max-width: 767px) {
.row.reorder-xs {
/*add necessary prefixes*/
transform: rotate(180deg);
direction: rtl; /* Adjust horizontal alignment */
}
.row.reorder-xs > [class*="col-"] {
/*add necessary prefixes*/
transform: rotate(-180deg);
direction: ltr; /* Adjust horizontal alignment */
}
}
Bootstrap 4 Update in 2018
One of the new features in Bootstrap 4 is the ability to rearrange full-width (12 unit) columns using flexbox ordering classes. This means you can easily change the order in which columns are displayed on different screen sizes. For example, consider the following code snippet:
<div class="container">
<div class="row">
<div class="col-12 order-sm-1 order-2">1</div>
<div class="col-sm-12 order-1">2 (first on xs)</div>
</div>
</div>
You can see this feature in action by visiting this link.
Want to achieve a similar layout on Bootstrap 3? Simply include a flexbox wrapper and set the flex-direction to column reverse. Here's an example of how you can do this (assuming mobile-first approach)...
HTML:
<div class="row">
<div class="flex-switch">
<div class="col-xs-12 col-sm-6">
This is a column
</div>
<div class="col-xs-12 col-sm-6">
This is a column
</div>
</div>
</div>
CSS:
.flex-switch {
display: flex;
flex-direction: column-reverse;
@include sm-min {
flex-direction: row;
}
}
I have a situation where I need to eliminate the text "(2012)" from a particular div using jQuery. Here is the code snippet that I am currently using: var el = $("#myDiv"); //replace(/word to remove/ig, ""); el.html(el.html().replace(/(2012)/ig, "")); ...
Previously, I searched on this platform for solutions but couldn't find anything that worked. Currently, I am using the Bulma Framework which is not very well-known. However, I need assistance in aligning the brand link on the navbar to the center. Be ...
It appears that when adding an 'href' tag to my anchor, all of the CSS formatting is lost. Is there a special way that CSS treats links? Below is the basic CSS: .topmenu > ul > li > a:visited, .topmenu > ul > li > a:active, .t ...
I am attempting to create a pop-up window using HTML, but I'm struggling to get it to appear in the desired way. My goal is this: to have a pop-up show up when the profile image is clicked on. Here's the HTML <span class="profile"><im ...
I've created a navigation bar with an unordered list consisting of smaller unordered lists, each with the class "subnav". When the screen is small, the navigation collapses and the menus stack on top of each other. I want the navigation to maintain i ...
I am currently working on a gallery website and facing an issue with the menu placement. I want to position the menu items on the right side of the images, but they keep appearing at the bottom instead. Despite adjusting the width in classes like galleryme ...
I am facing a The issue I am encountering is that while the CSS for k-treeview is being applied from the scss file, it is not being applied for the kendo-checkbox I attempted to resolve the problem by using the following code: <kendo-treeview ...
As I work on designing my webpage, I am looking to add a Blur filter to the body background-image. To achieve this, is it possible to reference the background-image property? ...
My goal is to conceal a footer beneath the main content that will only become visible when the main content is scrolled above the footer itself. However, I am encountering an issue where setting the footer's z-index to a negative value successfully hi ...
Seeking assistance with an issue I encountered, where the date of 12th March is combined with a table. Any suggestions on how to separate them? Screenshot: UPDATE:JFIDDLE ...
For my application, I am utilizing the display: grid property. My goal is to have the grid items always maintain a square shape by applying an aspect ratio of 1/1. While this works perfectly in Chrome, Firefox seems to ignore the aspect ratio code. Even co ...
One section of my code is located in sidebar.component.html : <ul class="nav"> <li routerLinkActive="active" *ngFor="let menuItem of menuItems" class="{{menuItem.class}} nav-item"> &l ...
I am attempting to convert my current Joomla 2.5 template into a responsive design for mobile devices using @media queries. My goal is to hide the right bar on smaller screens and have the article content cover 100% of the screen width. Here is the code I ...
Can anyone provide a solution for disabling scroll on the window but still allowing scrolling within a text area? I attempted to use the following code, but it ended up disabling everything entirely: $('html, body').css({ overflow: 'hid ...
I need assistance in creating a unique type of list that I call a "bullet separated paragraph list" by using a javascript array of strings. For example: item • item • item • item • item item • item • item • item item • ...
I've been working on a timeline project where the completed sections should have a green background with a check mark image in the foreground. It appears correctly in Firefox, Chrome, and Safari. However, in IE 7 and 8 (and possibly 9), the layout is ...
Currently, my project utilizes react-starter-kit and includes several react components, each with its own styling file (scss). Every component imports the styling file at the top like this: import s from './Header.scss'; When it comes to using ...
Currently, I am encountering a problem with using iframes to manage the navigation aspects on my website. Despite setting the iframe to have "overflow: visible;", it still crops the bottom of my content. The strange thing is, both iframes on the same page ...
There is a single toggle switch that, when clicked, switches ON and a popup with close and OK buttons appears. However, if the toggle is clicked again, it switches OFF and disappears. The specific requirement is that with every click where the toggle switc ...
Currently, I am working on implementing a multi-level navbar in my project using Bootstrap Navbar along with additional CSS and Jquery. If you want to review the codes, they can be found at: CodePen $(function() { // ------------------------------- ...