Strategies for rearranging columns within Bootstrap 4

I'm new to working with bootstrap and I've been struggling to change the order of columns when viewed on mobile devices.

Here's what I've attempted so far:

<div class="container">
<div class="row">
    <div class="col-lg-5 order-lg-1">
        B
    </div>
    <div class="col-lg-5">
      <div class="col-lg-12 order-lg-0">
        A
      </div>
      <div class="col-lg-12 order-lg-2">
        C
      </div>
   </div>
</div>
</div>

My goal is to achieve a layout similar to this: https://i.sstatic.net/9wPO6.jpg

However, when I test my code on mobile, it ends up looking like this: B A C

I would greatly appreciate any assistance with this issue. Thank you!

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

To hide elements on mobile devices, you can utilize the Bootstrap Hidding Element feature along with the Grid System by specifying col-sm* or col-xs* classes. Another approach is to employ Media Queries to apply different classes based on the width and height of the device.

Here's an example incorporating these techniques into your code:

<div class="container">
    <div class="row">
        <div class="col-lg-6 col-md-6 order-md-2 order-lg-2 d-md-block d-sm-none d-xs-none d-none">
            B
        </div>
        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
          <div class="col-lg-12 col-xs-12 col-sm-12 order-lg-1">
            A
          </div>
          <div class="col-lg-12 col-xs-12 col-sm-12 order-lg-2 d-block d-sm-none d-md-none">
            B
          </div>
          <div class="col-lg-12 col-xs-12 col-sm-12 order-lg-3">
            C
          </div>
       </div>
    </div>
</div>

Answer №2

To create the layout with columns, you can follow these steps:

<div class="wrapper">
  <div class="row">
    <div class="col-6">
      <div class="col-12">
        Apple
      </div>
      <div class="col-12">
        Cherry
      </div>
    </div>
    <div class="col-6">
        Banana
    </div>
   </div>
</div>

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

Tips for successfully implementing overflow-x in a timeline layout without causing any format disruptions

I've been working on a dynamic timeline design that adapts to different screen sizes. I applied overflow-x property to prevent horizontal scrolling in the mobile version, making the burger menu's sub-items visible without requiring a click. Howev ...

htmlcsshtml-listsoverflowtimeline

Creating a personalized input slider: A step-by-step guide

I have a question about how to design a custom input slider with the label inside the field itself. The desired output should look like the screenshot below: https://i.sstatic.net/gE6EJ.png I have successfully created the input field part, but I am stru ...

javascripthtmlcss

Tips for organizing the contents of nested items in alignment

Here's a layout I've created, you can view it on CodePen. .parent { display: flex; justify-content: space-between; } .left { flex-grow: 1; flex-basis: 0; background-color: blue; } .right { background-color: red; flex-grow ...

htmlcss

Tips for keeping the menu open even when you're not hovering over it with your cursor

I put together a stylish drop-down menu based on some web examples, but my manager pointed out that it can be inconvenient to use because the menu closes when the mouse moves off of it. I've tried various workarounds as outlined here, but none have in ...

htmlcss

Resolving the issue: "Unable to destructure the 'Title' property of 'fac' as it is undefined" in React JS

I'm facing an issue with react-bootstrap mapping in my component whereby I encounter the following error: Cannot destructure property 'Title' of 'fac' as it is undefined. It seems like there's an error when trying to de ...

htmlreactjs

AngularJS - Shared service object mistakenly removed in error

When I call the removeQuestion() function for the second time, 2 questions are being deleted instead of one. Any suggestions on what might be causing this issue? Let me know if you require additional code snippets. controller.js crtPromoCtrl.controller(& ...

javascriptangularjstwitter-bootstrapservicecontroller

Using inline-block can be effective on certain occasions

Hi everyone, I'm currently facing a puzzling issue and not sure what's causing it. Sometimes the elements I've set as inline-blocks cooperate as expected, but then when I refresh the browser, they suddenly decide to misbehave. Below is my ...

css

Enter information into the TextArea and jQuery dialog

I require assistance in populating a textarea with data obtained from querying a database. I have a jQuery dialog that contains another dialog, inside of which is a textarea. Here is some pseudocode: <MODAL> <modalB> <TextArea>s ...

javascriptjqueryhtml

IE's inconsistent float alignment causing display issues

My challenge is getting my div elements to float correctly in Internet Explorer. They are displaying perfectly in Chrome and Firefox, but IE seems to be messing up the code. The jsfiddle link showcasing the issue can be found here: http://jsfiddle.net/vlya ...

htmlcsswordpressinternet-explorer

What is the best way to make an exit pop up disappear when clicking on any area?

I'm new to programming in JavaScript and jQuery and I wanted to implement an exit pop-up feature. While I came across a helpful tutorial online, I encountered an issue where users could only exit by clicking on the "X" button. I want them to be able t ...

javascriptjqueryhtmlpopupexit

Region Covered by Mouse Over Does Not Extend Across Whole Div

On my website, there is an arrow located on the middle right side that, when hovered over with the mouse, reveals a sidebar. Clicking on each icon in the sidebar further extends it to reveal more content. However, the issue I am facing is that the sidebar ...

javascriptjqueryhtmlcssmouseover

Changing font color of a selected item in Material-UI's textview

I have a select textview in my react app and I am wondering how to change the font color after selecting an item from this textview. <div> <TextField id="standard-select-currency" select fullWidth l ...

javascriptcssreactjsmaterial-ui

Tips for effectively showcasing div elements

https://jsfiddle.net/qz8hL574/1/ for (var key in table) { if (table.hasOwnProperty(key)) { $('<div class="element"></div>').appendTo('#list'); document.getElementsByClassName("element")[key].innerHTML = ...

javascriptcssflexbox

Accessing Facebook through Login with only a button visible

I need help with checking the user's login status on Facebook. I have implemented the code provided by Facebook, but all I see is the login button. How can I determine if the user is already logged in or not? function testAPI() { console.log(&apo ...

javascriptjqueryhtmlfacebook

How can HTML5 be used to easily sync offline data with an online database?

Is there a straightforward method for creating an html5 app that can sync user changes made offline to the server? Imagine visiting a wiki site on your iPad, downloading the entire datastore to local html5 storage, then going offline and making edits as i ...

htmlsynchronization

Challenges regarding placement and z-index are causing issues

Currently, I am attempting to make the menu overlap the content on my webpage. However, I am facing an issue where it moves the content box instead of overlapping it. I have already experimented with the position: relative concept, but unfortunately, the ...

javascriptjqueryhtmlcss

Looking to showcase your logo prominently at the center of the page, flanked by two elegant

Is it possible to create a grid-like structure with dimensions 5.5-1-5.5? I would like to center a logo on the page with two lines on the left and right. (Please excuse my limited English skills) https://i.sstatic.net/cgjfS.png ...

htmltwitter-bootstrapcss

Error: Repetition of Django URLs

Currently working on a Django application that requires a contact form to be added. I have everything set up correctly, but I noticed a funny bug while testing the navigation bar. Every time I click the same route twice, the route gets duplicated. http://1 ...

djangobootstrap-4

Could the quantity of JavaScript files impact the performance of a project and cause any delays?

In my current HTML and JavaScript project, I am incorporating multiple JavaScript files. I'm curious to learn about the potential impact of having numerous JavaScript files on a web project's efficiency and speed. Can anyone shed some light on th ...

javascripthtmlclient-side

the neighboring div sliding to the left causing the div not to expand with its content

I am trying to create a website similar to this one. When I click on the arrow, the left div collapses and the right one expands. However, the content of the right div does not expand as expected! Below is my HTML code: <div class="tools-bg"> & ...

jqueryhtmlcss