Personalize the layout of bootstrap columns for desktop devices

Using Bootstrap v3.1.1

When the viewport is less than 992px, the divs are arranged like this:

[ left ]

[ main ]

[ right ]

Is there a way to have them displayed in a different order?

[ main ]

[ left ][ right ]

*main centered with left and right centered below it

<div class="container">
    <div class="row clearfix">
        <div class="col-md-2 column left" style="background: rgb(108,108,240)"></div>
        <div class="col-md-8 column main" style="background: rgb(108,108,240)"></div>
        <div class="col-md-2 column right" style="background: rgb(108,108,240)"></div>    
    </div>
</div>
csshtmltwitter-bootstraptwitter-bootstrap-3

Answer №1

One way to set the column width for smaller devices is by utilizing col-sm-* or col-xs-*

<div class="container">
    <div class="row clearfix">
        <div class="col-md-2 col-sm-12 column left" style="background: rgb(108,108,240)"></div>
        <div class="col-md-8 col-sm-6 column main" style="background: rgb(108,108,240)"></div>
        <div class="col-md-2 col-sm-6 column right" style="background: rgb(108,108,240)"></div>    
    </div>
</div>

Remember that the largest column (main) should be positioned first in the hierarchy of divs

JSFiddle Link

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

CSS style takes precedence over inline JavaScript transitions occurring from a negative position

I am puzzled by a JavaScript fiddle I created which contains two small boxes inside a larger box. Upon clicking either of the buttons labeled "Run B" or "Run C", the corresponding box undergoes a CSS transition that is controlled by JavaScript. Below is t ...

javascriptcss

When using the POST method to modify data via an HTML form, the previous values may be

I am currently developing a CRUD system and focusing on the Update functionality. My task involves updating existing user data with new information submitted through an HTML form. At this stage, I am working on retrieving the POST values from the HTML for ...

phphtmlsqlmysqli

Designing HTML components with cohesive HTML and CSS

Check out this live demo I'm working on creating modules that have consistent markup and CSS, allowing for flexibility in size adjustments. I want to use the same module in various sections like utilities, footer, or header. My goal is to structure ...

htmlcss

Aligning multiple 'divs' horizontally with different lengths of text

I have a set of 3 identical divs with fixed width. Each contains text of varying lengths and another nested div that is aligned to the right using float. When the text lengths are equal, they align perfectly. However, when the text lengths differ, the ali ...

htmlcss

When using jQuery, the content loaded with the $ajax function only displays after refreshing the page

Located on an external server is a directory containing various .html files, including one named index.html. The server has the ability to load either the folder name or foldername/index.html in its URL. Each html file within the directory loads a corresp ...

javascriptjqueryhtmljsonajax

Unable to execute multiple backstretch instances

I am having trouble adding two different backgrounds to two different divs or on the body and a div simultaneously. Only one of the two backgrounds is displayed. For example, on this page: The background shows up, but not the #sliders div. P.S. The Java ...

jquerycss

Encountered a problem while executing CSS in Shiny R

I am attempting to incorporate my css file into Shiny R. I have been able to run the application without any issues before adding the style.css file. Below are the steps I have taken: library(shiny) library(tidyverse) library(leaflet) library(leaflet.extra ...

cssrshiny

Issue with footer position not remaining at the bottom of the page

Hey there, I've been experiencing some issues with my website's layout. I tried setting a min-height of 1000px on the mainbody to make all the pages the same size, but it's caused a problem with my footer. Now, the footer is positioned in th ...

htmlcsswebfooter

What is a reliable method to retrieve the text from the current LI if all LI elements in the list share the

I'm encountering an issue with retrieving the text from LI elements because I have 10 list items and they all have the same class name. When I attempt to fetch the text using the class name or id, I only get the text of the last item. Here is my code ...

javascriptjqueryhtml

Display the cost in a dynamic label that adjusts accordingly as the user modifies its value

Currently, I am facing the following issue. I am in the process of creating a form where users can choose from a selection of products they want to order. The form currently looks like this: <input type="number" class="bestelformulier" name="PizzaMaga ...

javascriptphphtmlforms

The onmessage event in the websocket client seems to be malfunctioning and is not triggering

In my implementation using node.js, I have set up a websocket server and client. The handshake process between the server and client appears as follows: Request URL: ws://localhost:8015/ Request Method: GET Status Code: 101 Switching Protocols Request ...

javascripthtmlnode.jswebsocket

Is there a way for me to incorporate a feature that lets the user specify the URL based on their input in a search box?

Currently, I am working on a project that involves creating two text fields for user input, along with a "View Report" button. My goal is to have the button redirect users to a specific URL structured like this: http://example.com/reports/example/reports/ ...

javascriptjqueryhtmlcss

HTML- Any suggestions on how to troubleshoot my sticky navbar not functioning properly?

I'm having trouble creating a sticky navbar. I've attempted to use z-index: 999 but it's not behaving as expected. * { margin: 0; padding: 0; } .navbar { display: flex; align-items: center; justify-items: center; position: ...

javascripthtmlcss

Creating an HTML table with colspan and rowspan using ng-repeat from a deeply nested JSON dataset

I'm working on creating a table layout shown in the attached image: Composite Class Routine Check out my progress so far in this Plunker demo: https://plnkr.co/edit/4WiWKDIM2bNfnmRjFo91?p=preview The JSON data I'm using is as follows: $scope. ...

htmlcssangularjsjsonangularjs-ng-repeat

Implementing Dynamic Script Injection in Angular Controllers for Enhanced HTML Functionality

I'm a total beginner when it comes to Angular and frontend development, so please bear with me if my question seems basic: In my controller, I have the following code where I am populating the $window.user data that is being used in the script [2] ad ...

javascripthtmlangularjs

Turning my dual button navigation into tabs to display distinct HTML pages beneath a designated header

body{ background:url(background.jpg); background-size: cover; } h1{ font-family: 'Dancing Script', cursive; font-size: 5em; color: white; text-align: center; margin-top: 25px; margin-bottom: 20px; } h2{ font-size: 18px; color: white; text-align ...

javascripthtmlcss

Using either Javascript or jQuery, I want to set a value within an if statement

Can I set a value within an if statement, like this: if (a = jQuery("#user > .mask.fix > .a1").css('display') != 'none'){ b = a + 'hello'; //b=jQuery("#user > .mask.fix > .a1").css('display')+&apos ...

javascriptjqueryhtmlfunctionif-statement

Update the background color of an li element upon clicking

Is there a way to change the background color upon clicking on the li anchors? <div class="text-center row"> <ul class="col-md-12 secondNav"> <li class="navbar-brand nav-item" style="margin-right: 9%"> <a href="#" >& ...

csshtmlresponsive-designbootstrap-4

Interactive Map Using HTML5, CSS, and JQuery

As someone venturing into the world of web front end development, I am curious about the process of mapping an image so that specific functions can be triggered by pressing different parts. In this case, the shapes will be irregular (such as a map of Europ ...

jqueryhtmlimagecssmapping

assistance needed in setting up an HTML nested list for a sub navigation menu

I'm encountering an issue with my nested list that is used to create a subnav. It's currently positioned absolutely, but its parent cannot be relatively positioned as the overflow on the parent's parent is hidden, preventing the full sub nav ...

jqueryhtmlcssoverflowcss-position