Reorganize column layout with Bootstrap grid and modify sequence

Below is an image showcasing the desired change: https://i.sstatic.net/mnUUq.png

Currently, the page layout consists of two main columns: a sidebar on the left with rows, and the main body on the right, formatted in a 3x9 grid. My goal is to have the first row of the first column move to the bottom in mobile view. I considered splitting the first column into two separate columns and stacking them on top of each other, then adjusting the column order for mobile view. However, I am unsure how to accomplish this...

Here is the current grid layout in HTML:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d6b4b9b9a2a5a2a4b7a696e2f8e0f8e4">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="660c171303141f265548534857">[email protected]</a>/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="99fbf6f6edeaedebf8e9d9adb7afb7ab">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

<div class="container">
  <div class="row">
    <div class="col-lg-3">
      <div class="row">
        <!-- The row I want to move to the very bottom in a mobile view -->
      </div>
      <div class="row">
      </div>
      <div class="row">
      </div>
      <div class="row">
      </div>
    </div>
    <div class="col-lg-9">
      <!-- Content -->
    </div>
  </div>
</div>

htmlcssbootstrap-4

Answer №1

Double the content of the first row:

Check out the code snippet below.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="87f5f8f8f3f4f3f5e6f782d6cce4dce0">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4b213a3e2e39322b2f1e4a5b60b10241553998f464a">[email protected]</a>/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="20626f6f767176697c7b467b6a43777f737b">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

<div class="container">
  <div class="row">
    <div class="col-lg-3">
      <div class="row d-lg-block d-none">
        <!-- Visible on Desktop -->
        Display this on desktop
      </div>
      <div class="row">
        Row
      </div>
      <div class="row">
        Row
      </div>
      <div class="row">
        Row
      </div>
    </div>
    <div class="col-lg-9 px-0">
      Content
    </div>
  </div>
  <div class="row d-lg-none d-block">
    <!-- Visible on Mobile -->
    Display this on mobile
  </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

Exploring JSON without taking into account letter case

Looking to conduct a case-insensitive search in a JSON file? Here's the JSON data you can work with: { "Data" : [ {"Name": "Widget", "Price": "25.00", "Quantity": "5" }, {"Name": "Thing", "Price": "15.00", "Quantity": "5" }, {"Nam ...

javascripthtmljson

How to retrieve an anchor element from a list using JavaScript

My current code loops through each <li> within a <td> cell and adds a class to the <li>. I have now inserted <a> tags between each <li> and am facing challenges in accessing the <a> tags. What I actually want is to assig ...

javascripthtmliteration

Creating HTML tags using Kotlin

Looking to generate HTML using Kotlin in the browser, I experimented with the Kotlinx library. However, I found that it lacks support for callbacks like the following: div { onclick = { event -> window.alert("Kotlin!") } } Are there an ...

javascripthtmlkotlinkotlinx-html

CSS responsive design: concealing elements does not prevent the page from being displayed

Imagine a scenario where I need to display a template in two different versions based on the user's device. For instance, I have utilized the following code: <div class="desktop"> <body> Hi Desktop user </body> </div> ...

javascripthtmlcssresponsive-design

PHP loaded HTML does not allow JavaScript to execute

My system includes an announcements feature where all announcements are retrieved from a database and displayed on the screen using Ajax and PHP. Below is the code snippet used to load each announcement onto the page: echo '<div id="announcements ...

javascriptphpjqueryhtmlajax

Run a JavaScript code to show a hidden element

My latest project involves automating tasks on a website using Selenium. I encountered an issue where I cannot click on a hidden button defined this way: <body> <div class="smenu" id="smenu4"> <input tabIndex="-1" type="button" ...

c#htmlselenium

Design a dynamic rectangular division using CSS and Bootstrap 4 that adapts to different screen sizes

I am encountering difficulties attempting to replicate a full-width rectangle div on a website, particularly with issues related to responsiveness and mobility. Here is an example of the design I am trying to recreate. And here's what I've acco ...

htmlcss

Troubleshooting Angular MIME problems with Microsoft Edge

I'm encountering a problem with Angular where after running ng serve and deploying on localhost, the page loads without any issues. However, when I use ng build and deploy remotely, I encounter a MIME error. Failed to load module script: Expected a ...

javascripthtmlangulartypescriptwebstorm

Securing PHP Code with HTML Encoding

I'm having trouble parsing an HTML page due to encoding issues. Despite trying popular solutions like using utf8_encode() and utf8_decode(), my results remain unchanged. Below is a snippet of my code along with the output. Code $str_html = $this-> ...

phphtmlcharacter-encoding

To access the CSV file within Selinium using Python, simply click on the "Download CSV image"

I am brand new to working with Selenium. My current task involves downloading a csv file from a specific webpage (). The process includes selecting options from dropdown menus such as View Options Contracts for, choosing BANKNIFTY, selecting an Expiry Date ...

pythonhtmlseleniumselenium-webdriverselenium-chromedriver

jQuery UI DatePicker: without any styling, no picking dates

I'm struggling to configure a jQuery UI DatePicker. I moved the development-bundle folder contents to the directory res/jqueryui and initialized two datepickers as shown below: <script src="res/jquery-2.1.0.min.js"></script> <script sr ...

jquerycssjquery-uidatepickerjquery-ui-datepicker

I keep seeing this strange [object HTMLSpanElement] appearing on my HTML page

Thanks for the help, the issue has been resolved and I appreciate your valuable time! ...

javascripthtmljquerytags

Leveraging Javascript within MVC3, either on a master page or child page

I'm currently developing a web application utilizing MVC3 and I am curious about the best practices for incorporating JavaScript. Specifically, I am uncertain about whether to include JavaScript in the master page as well as in individual child pages. ...

javascripthtmlasp.net-mvc-3

The AngularJS component materializes almost instantaneously

Using AngularJS, I have developed an application where a certain section of code is displayed after the page loads for a split second: <div class="col-sm-4" data-ng-repeat="user in users"> <div class="card"> ...

javascripthtmlangularjs

Does CSS include a shadow child operator?

Did you know that Google Chrome has a special feature called the shadow descendant combinator /deep/? This unique combinator allows for the selection of elements within shadow nodes. body div {...} // this doesn't target descendant divs inside shadow ...

cssgoogle-chromecss-selectorsshadow-dom

What is the correct way to align a shape with a border width in the center of its parent input button?

My newsletter subscription box features a form that spans the entire width of its parent element, causing the button to fill up all available space. To add a visual touch, I used the before CSS pseudo-element to create a small 'arrow' shape abov ...

css

Use jQuery and AJAX to update the current HTML content only when the image has finished loading

I am attempting to load a .php file that contains a 2Mb image into a specific div. While I can make this work with ajax, my issue is that I only want the content of the current div to be replaced with the new one once the image finishes loading. Currently ...

phpjqueryhtmlajaxloading

Form submission not functioning within a bootstrap popover

I'm having trouble saving a URL from an input field (the form is inside a Bootstrap popover) - nothing happens when I click the save button. Below is my HTML code: <div id="popover-content" class="hide"> <form name ="bform" method = "post" ...

htmldjangotwitter-bootstrap-3popover

What is the anticipated durability of flex products?

UPDATE: JANUARY 2014 - The answer provided previously is no longer relevant. This question has been posted on flexcoders as well. Our team primarily works with flex technology. However, a potential client has expressed concerns about the longevity of fle ...

htmlflashapache-flex

Tips on containing text within a div box without exceeding its boundaries

I've been struggling with containing the text in my display area. No matter what I try, the text keeps overflowing and it's driving me crazy. I've researched various solutions like using word-wrap: break-word;, adjusting width manually, but ...

htmlcss