Hello there! I am currently exploring a potential scenario.
When viewing on a desktop or laptop, the layout should look like this:
<div class="col-md-3">
sidebar
</div>
<div class="col-md-9">
article
</div>
On a smaller screen, the two divs will switch positions and appear like so:
<div class="col-md-9">
sidebar
</div>
<div class="col-md-3">
article
</div>
I would greatly appreciate your input!
Yes, it is possible! You can specify the column sizes for different screen breakpoints by applying multiple grid classes to your <div> elements. For example, you can use col-xs-9 col-md-3 for the sidebar and col-xs-3 col-md-9 for the article. This configuration will allocate 9 out of 12 columns for the sidebar on smaller screens (xs and sm) and 3 out of 12 columns for larger screens (md and lg).
Feel free to experiment with the breakpoints in the example below:
.box {
border: 1px solid #c66;
background-color: #f99;
}<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-xs-9 col-md-3 box">
sidebar
</div>
<div class="col-xs-3 col-md-9 box">
article
</div>Based on your comment, it seems like you want the article to be displayed above the sidebar on small screens. Achieving this requires three steps:
Start designing for mobile screens first by rearranging the order of the sidebar and article <div> elements.
Ensure that both the sidebar and article occupy the full width (12 out of 12 columns) on small screens using col-xs-12, causing the sidebar to move beneath the article.
For desktop screens, arrange the sidebar on the left and the article on the right. This can be achieved by pulling the sidebar to the left with col-md-pull-9 (offsetting by 9 columns) and pushing the article to the right with col-md-push-3 (offsetting by 3 columns).
Take a look at the revised example below:
.box {
border: 1px solid #c66;
background-color: #f99;
}<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-xs-12 col-md-9 col-md-push-3 box">
article
</div>
<div class="col-xs-12 col-md-3 col-md-pull-9 box">
sidebar
</div>Bootstrap offers a few prefixes for specifying width classes: -xs-, -sm-, -md-, and -lg- (from smallest to largest).
On screens starting from -md- and larger, you can use classes like col-md-3 and col-md-9. To reverse the order on smaller screens before -md-, add the -xs- or -sm- prefix.
To reverse your classes, simply do the following:
<div class="col-md-9 col-xs-3"></div>
<div class="col-md-3 col-xs-9"></div>
Give this a shot:
<div class="col-sm-9 col-md-3">
sidebar
</div>
<div class="col-sm-3 col-md-9">
article
</div>
By implementing this code, you'll showcase the sidebar in 9 blocks for eXtraSmall (xs) and SMall (sm), and in 3 Blocks for MeDium (md) and LarGe (lg). The arrangement will also work vice versa.
In the middle of my website, there is a console that contains links to dynamically update its content using javascript. Everything works smoothly, but the new HTML added dynamically does not have any styling applied to it. Is there a way to refresh the CS ...
Encountering a strange issue where using $window.print in angularjs results in only the date, page name, page number, and url appearing on the printed page. The rest of the content is missing even though the original page has plenty of it. I suspect the p ...
I am interested in adding a real-time word count feature to a TextAreaField using jQuery. I found an example that I plan to use as the basis for my code: <html lang="en"> <head> <script src= "https://code.jquery.com/jquery ...
I am trying to wrap HTML around an existing div, here is what I have attempted: HTML: <input type="text" data-placeholder="username" /> It should look like this when rendered: <div class="placeholding-input"> <input type="text" data-pl ...
After selecting an option, I am facing an issue where I cannot capture the ng-click event when a user chooses a value from the drop-down menu. This is because the select option has been altered by bootstrap-select, as the default select option does not sup ...
Currently, I am attempting to implement an infinite horizontal scroll section in vuejs for a selection of products. However, I am facing difficulties achieving the infinite effect. My approach so far involved removing the card that goes out of view and add ...
How can I invoke a function in Angular using inner HTML? I attempted the following: cellTemplateFunc(cellElement, cellInfo){ var subContainer = document.createElement('div'); subContainer.innerHTML = "<a href='javascript:v ...
When attempting to create a vertical menu, the final result doesn't align as expected. https://i.stack.imgur.com/2ok47.jpg This is the current code being used: $("#example-one").append("<li id='magic-line'></li>") ...
I've been working on a small project and I've managed to create this panel, but I'm looking to change the position of the "tab" to something similar to this Can anyone help me out? I'm still new to all of this~ http://jsfiddle.net/ ...
I am currently developing a web application that includes side menus. However, I am facing an issue with the functionality of these menus. Whenever I click on certain options, the entire page refreshes. For example, under my main menu "Planning the Engagem ...
Is there a way to take values and use them for hiding or displaying certain divs? I have been using jQuery Simple Slider for this purpose. I attempted the following code, but it did not work well. I want the div with id "3" to be visible when the slider ...
I found a code snippet in my DOM that sets the current date on a table. <table id="daysTableLeft" class="table table-hover" ng-init="getHorraire(pickDateRow,$index,0)"> <tr ng-repeat="fd in getFullDayDate track by $index ...
When it comes to designing with HTML5 and CSS3, is it more beneficial to rely on margin and padding for layouts or should positioning be the main focus? I have always combined both methods to achieve desired outcomes but there are examples where each appr ...
I need to transfer the userName from a selected user in a list of userNames that a logged-in user clicks on to a twitter bootstrap modal. I am working with grails and angularjs, where data is populated using angularjs. Set-Up The view page in my grails a ...
My sass map contains a variety of color shades, and the full code can be found on Codepen: $pbcolors: ( pbcyan : ( 50: #E5F5FC, 100: #CCEBF9, 200: #99D7F2, 300: #66C3EC, 400: #33AFE5, 500: #009DBF, 600: #008CAB, 700: #007C98, 800: #006D85, 900: #005D72 ...
I'm currently in the process of creating a buttoned-link feature. The aim is to incorporate a border around the link with an outset style, while having the border-style change to inset when the link is active using a:active and border-style: inset. A ...
My goal is to generate a dynamic table using Angular. The idea is to create a function where the user inputs the number of rows and columns, and based on those values, a table will be created with the specified rows and columns. However, I am facing an iss ...
Is there a way to modify the WooCommerce Shipping weight field so that it can accept alphanumeric values, like: 500g / 1kg / 750ml / 2L I only need the weight for informational purposes and don't require any shipping. The location of the file re ...
Can you help me modify this design using Bootstrap rules while keeping the original CSS files intact? I need to make these 5 cards (columns) full width with a navbar. Issue 1: I always see a vertical scroll bar on desktop. Issue 2: The Navbar doesn' ...
I am struggling to populate a text area with the value using this code snippet... <?php $message = $_REQUEST['message']; ?> <br/><b>Description</b><br/> <TEXTAREA NAME="message" COLS=40 ROWS=6 value="<?=$messa ...