Changing column layouts on mobile using Bootstrap 4

Using Bootstrap's grid system, I have created a layout with a sidebar. The structure is as follows:

<div class="row">
  <div class="col-md-3">
    ...
  </div>
  <div class="col-md-9">
    <div class="row">
      <div class="col-md-4">...</div>
      <div class="col-md-4">...</div>
      <div class="col-md-4">...</div>
    </div>
  </div>
</div>

https://i.sstatic.net/akoi9.png

When viewed on mobile, the red area appears above the green one. I am seeking a solution to toggle between them conveniently without having to scroll, potentially using a switch button like this:

https://i.sstatic.net/1a7EO.png

It is important to take note of the different element order in the green area.

Is there an efficient way to achieve this design requirement? Or would it be necessary to manipulate the DOM using JavaScript? Thank you for your assistance :)

javascriptcsstwitter-bootstrapbootstrap-4twitter-bootstrap-4

Answer №1

If you want to change the order of columns in Bootstrap 4 using jQuery, you can toggle one of the flexbox utility classes like flex-last. For instance, you can apply the flex-last class to the first (col-md-3) column.

To rearrange the order on mobile devices with a button click, simply toggle the flex-last class...

$('#btnToggle').click(function(){
    $('.col-md-3').toggleClass('flex-last');
})

EDIT: To display only one at a time (toggle visibility of the two divs with a button), you can toggle the hidden-sm-down class instead...

$('#btnToggle').click(function(){
    $('.col-md-3, .col-md-9').toggleClass('hidden-sm-down');
})

Check out the Demo here

In Bootstrap 4, you have the option to switch column order using CSS alone. However, this rearranges columns based on screen width and does not respond to button clicks.

<div class="row">
  <div class="col-md-3 flex-last flex-md-unordered">
    ...
  </div>
  <div class="col-md-9">
    <div class="row">
      <div class="col-md-4">...</div>
      <div class="col-md-4">...</div>
      <div class="col-md-4">...</div>
    </div>
  </div>
</div>

Update

With Bootstrap 4 Beta 3, the ordering classes are now named order-*, such as order-1, order-md-2, etc.

Answer №2

Bootstrap 4 takes advantage of Flexbox, allowing for customization of the order in which elements are displayed.

You have the flexibility to control how content appears on different screen sizes using classes like order-last and order-sm-unordered.

Check out the flexbox/order documentation for more details.

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

Using `ng-disabled` in AngularJS to check a function that utilizes `$http.get`

Seeking assistance on how to make my ng-disabled button trigger a controller function that makes an $http.get request. Below are the relevant code snippets: HTML Code: <a class="btn btn-warning" ng-click="upVote(item,me.email);" ng-disabled="votechec ...

javascriptphphtmlangularjs-scopeangularjs-ng-click

Checkbox not appearing in datagrid when using Material-UI

There are some key code snippets related to the datagrid below const apiRef = React.useRef(null); const [gotApiRef, setGotApiRef] = useState(false); const [gotApiRef2, setGotApiRef2] = useState(false); console.log("apiRef.current: ", apiR ...

javascriptnode.jsreactjsexpressmaterial-ui

Are websites built with HTML and JavaScript considered secure in today's digital age?

In the scenario where I create a website using HTML5, Javascript, and CSS3 with no forms or input fields other than mouse clicks on links, as well as no logins, messaging, or comments - will this site still be vulnerable to attacks? Recently, my hosting s ...

javascripthtmlcsssecurity

Error in browser caused by JQuery JavaScript, not Dreamweaver

I need help creating a webpage that can extract and display recent earthquake data based on user input location on Google Maps. I have been using Dreamweaver to test my code, and everything functions perfectly when I use the live webpage feature within th ...

javascriptjqueryhtmlajaxjson

Establishing a client cookie will help deter any attempts at re-registering

Due to the inability to run server-side code, I am limited in implementing a PHP session for a registration form. Instead, I have opted to utilize a client cookie to ensure that each person can only register once with a unique email address. After reading ...

javascriptjquerycookies

Creating a user-friendly HTML form to convert multiple objects into JSON format

Edited content: $.fn.serializeObject = function() { var obj = {}; var arr = this.serializeArray(); $.each(arr, function() { var value = this.value || ''; if (/^\d+$/.test(value)) value = +value; if (obj[this.name] !== u ...

javascriptjqueryhtmljsonforms

JavaScript Bridge function in WebView not invoked

I encountered a strange issue with my application, which functions as an e-reader. To invoke functions for the web view, I utilize a JavaScript class: public class MyJavaScriptInterface { Context mContext; /* Instantiate the interface ...

javascriptandroidwebview

When working with AngularJS, using ng-repeat to loop through elements may encounter difficulties if the key contains a colon ":"

I am facing an issue while trying to loop through a simple JSON in AngularJS using ng-repeat. The specific JSON I am working with is as follows: $scope.lines = { data: [ { "properties": { "name": "My test", ...

javascriptjsonangularjsangularjs-ng-repeat

Is your AngularJS code throwing an error?

$scope.logout = function () { //var auth_token = $cookieStore.get('auth_token'); Auth.delete({ 'auth_token': $cookieStore.get('auth_token') }, function(data){ $scope.isLoggedIn = false; $cookieSto ...

javascriptangularjs

Sending an ajax request to submit the results of jQuery.each loop

$(".submitinfo").each(function() { // Using ID as POST name and value as POST value }); // Sending the data using ajax request $.ajax({ url: 'submit.php', traditional: true, data: { 'submit':'true', 'age&a ...

javascriptjqueryajax

using a post Response to trigger a new Post request

I've recently begun working on creating an API using nodeJS for the back-end of my front-end web application with Bootstrap. Although I just started learning front-end development yesterday, I've managed to fix most of the bugs. The only issue no ...

javascriptnode.jsbootstrap-4

Can additional classes/styles be added to a CSS3 background?

Today I discovered that CSS3 has the capability to support multiple backgrounds, which is truly amazing. What I would love is the option to combine multiple backgrounds dynamically, like this: .Watermarked{ background: url('text/logo.png') bot ...

cssbackground

Header remains fixed when scrolling

Is there a way to make the header of a Bootstrap table fixed when scrolling, while also adjusting the width of each column based on the content within it? I want the column headers to match the width of the row with the most text. Setting the position of t ...

angularcssbootstrap-4

Looping through each <li> element using JavaScript, insert an image with a hyperlink that redirects to a different page within every li item

I am looking to iterate through each <li> element and dynamically add an image with a link that redirects to a different page using JavaScript. The goal is to store all images, links, and titles in an array object by utilizing the Document Object M ...

javascripthtmlurldomhyperlink

The steps to building a personalized checkbox that includes an indeterminate state

I've been attempting to achieve an indeterminate state for a custom checkbox without success. My efforts using css have not yielded the desired outcome. This is what I've tried so far: $(document).ready(function() { var checkboxes = docume ...

javascriptjqueryhtmlcss

Unusual actions when making a $.ajax call using the PUT method

When making a call to $.ajax, I use the following code: $.ajax({ type: 'PUT', url: model.url(), data: {task: {assigned_to: selected()}}, contentType: 'application/json' }) The function selected() returns an array. However, th ...

javascriptjqueryajaxjson

Is there a straightforward method for tallying numbers in mongoose?

Here's the code I've written: Company.count({}, function(err, company) { Checkpoint.count({}, function(err, checkpoint) { Guard.count({}, function(err, guard) { Device.count({}, function(er ...

javascriptnode.jsmongodbexpressmongoose

Adding JSON data to an HTML document

Seeking guidance on how to efficiently parse and display information from a JSON file consisting of 3 objects onto a widget. Unsure of the best approach to achieve this task. Any suggestions or methods would be greatly appreciated. Widget Structure: < ...

javascriptjqueryjsonhtml

I am experiencing an issue with my localhost website where the images only display after I open the files in VScode. Is there a way to load the images correctly using app.js?

app.js While working on web development in VScode, I've encountered an issue where the images on my localhost website only appear after opening files like home.pug and contact.pug alongside app.js. Is there a way to make the images load properly witho ...

javascripthtmlnode.jsexpresspug

Is there a way to simulate the parameters injected into an fs callback without actually interacting with the filesystem during testing?

I'm currently utilizing Chai, Mocha, and Sinon for my testing framework. At the moment, I have a functioning test, but I find myself having to set up a directory and populate it with files just to make my tests run successfully. This approach doesn&a ...

javascriptnode.jsasynchronousstubsinon