developing a fluid grid system with flexible ordering

I'm currently working on a section for my app that consists of one row with 3 columns, each column containing 3 divs.

JSFIDDLE: demo

Here is how it should appear in desktop view:

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

And here is the expected appearance on smaller devices:

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

I've attempted to find a solution, but so far I haven't achieved the desired outcome.

HTML

                    </div>
                    <div class="col-md-2 left-top-details_second">

                    </div>

                </div>
             <div class="row subrow_bottom">
                  <div class="col-md-4 left-bottom">

                </div>
                </div>

        </div>

        <div class="col-md-4 middle">
                <div class="row subrow">
                    <div class="col-md-2 left-top-details_first">

                    </div>
                    <div class="col-md-2 left-top-details_second">

                    </div>

                </div>
             <div class="row subrow_bottom">
                  <div class="col-md-4 left-bottom">

                </div>
                </div>

        </div>

        <div class="col-md-4 right">
                  <div class="row subrow">
                    <div class="col-md-2 left-top-details_first">

                    </div>
                    <div class="col-md-2 left-top-details_second">

                    </div>

                </div>
             <div class="row subrow_bottom">
                <div class="col-md-4 left-bottom">

                </div>
                </div>

        </div>

    </div>

    </div>

</section>

CSS

body{
  background: red;

}
#for-her{
height: 1200px;
background: red;
overflow: hidden;
}
.col-md-4 {    
  height: 200px;
    margin: 20px 0px;

}

.left-top-details_first{
    border: 2px solid white;
     height: 200px;
         width: 100%;
}
.left-top-details_second{
border: 2px solid white;
     height: 200px;
         width: 100%;
}

.left-bottom{
    border: 2px solid white;
     height: 200px;
     width: 100%;
}

@media (max-width: 768px){
    .main-row{
    display: flex;
    flex-direction: column;
    }

}

The maximum width of the website should be 1240px;

What adjustments do I need to make to achieve the desired result? Any assistance or recommendations would be highly appreciated.

Answer №1

It seems that you are working with a layout consisting of 3 columns, each containing 2 sub-columns. To achieve this structure, your code could look similar to the example below:

.col{
  border: 1px solid;
  height: 80px;
  margin:5px;
}

.col-12 > div {
  height: 50px;
  background: #fff;
  margin:5px;
}

body {
  background: pink!important;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" >
<div class="container">
  <div class="row">
    <div class="col-md-4">
      <div class="row">
        <div class="col"></div>
        <div class="col"></div>
        <div class="col-12 p-0">
          <div></div>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="row">
        <div class="col"></div>
        <div class="col"></div>
        <div class="col-12 p-0">
          <div></div>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="row">
        <div class="col"></div>
        <div class="col"></div>
        <div class="col-12 p-0">
          <div></div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer №2

If you're using Bootstrap 4 classes, there's no need to manually tweak the default CSS.

All you have to do is enclose your boxes within a row and apply the class names col-lg-2 col-12 to each box for the desired layout.

col-lg-2 col-12 will divide each box into 2 columns / 12 columns (6 per row) on large screens and 12 columns / 12 columns (1 per row) on tablets and phones.

Within each box, create another row and assign the class name col-6 to both inner boxes, then nest the bottom box inside a full-width box.

col-6 gives each of the two inner boxes 6 columns / 12 columns (2 per row) on all screen sizes.


For a practical demonstration of the above instructions, check out this JSFiddle link or run the following Code Snippet:

body{width: 100%;height: 100%; text-align: center;}
#for-her{
height: 1200px;
width: 100%;
background: red;
overflow: hidden;
}
.col-lg-2 {border: 2px solid white;margin: 10px 0px;}
.col-lg-12 {background-color: #FFF; color: #000;}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<section id="for-her">
  <div class="container">
    <div class="row">
      <div class="col-lg-2 col-12">
        <div class="row">
          <div class="col-6">ABCD</div>
          <div class="col-6">ABCD</div>
          <div class="col-lg-12">Yes</div>
        </div>
      </div>
      <div class="col-lg-2 col-12">
        <div class="row">
          <div class="col-6">ABCD</div>
          <div class="col-6">ABCD</div>
          <div class="col-lg-12">Yes</div>
        </div>
      </div>
      <div class="col-lg-2 col-12">
        <div class="row">
          <div class="col-6">ABCD</div>
          <div class="col-6">ABCD</div>
          <div class="col-lg-12">Yes</div>
        </div>
      </div>
      <div class="col-lg-2 col-12">
        <div class="row">
          <div class="col-6">ABCD</div>
          <div class="col-6">ABCD</div>
          <div class="col-lg-12">Yes</div>
        </div>
      </div>
      <div class="col-lg-2 col-12">
        <div class="row">
          <div class="col-6">ABCD</div>
          <div class="col-6">ABCD</div>
          <div class="col-lg-12">Yes</div>
        </div>
      </div>
      <div class="col-lg-2 col-12">
        <div class="row">
          <div class="col-6">ABCD</div>
          <div class="col-6">ABCD</div>
          <div class="col-lg-12">Yes</div>
        </div>
      </div>
    </div>
  </div>
</section>

Answer №3

.column{
  border: 1px solid;
  height: 80px;
  margin:5px;
}

.column-12 > section {
  height: 50px;
  background: #000;
  margin:5px;
}

body {
  background: #ccc !important;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" >
<div class="container">
  <div class="row">
    <div class="col-md-4">
      <div class="row">
        <div class="column"></div>
        <div class="column"></div>
        <div class="column-12 p-0">
          <section></section>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="row">
        <div class="column"></div>
        <div class="column"></div>
        <div class="column-12 p-0">
          <section></section>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="row">
        <div class="column"></div>
        <div class="column"></div>
        <div class="column-12 p-0">
          <section></section>
        </div>
      </div>
    </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

Remove the opacity setting from a transparent box that covers the entire page

I find that real code tends to be more complex, but this snippet does a good job of highlighting the issue at hand. In my setup, there's a background video playing (in this case, just as the background), and on top of that sits a transparent watch fa ...

What is the best way to loop through an array of JSON data in order to consistently retrieve the initial JSON object?

How can I retrieve only the full highlight videos from the JSON object in the video array? { "response": [ { title: "United vd Chelsea", "videos": [ { "title": "Highlights&quo ...

css and HTML tutorial: Centering a DIV element with CSS styles

I have exhausted all similar questions and solutions, but nothing seems to work for me. My goal is to center a DIV element using CSS, and I've tried options like text-align, margin auto, and inline-block with no success. The example code I am experime ...

Querying the database to check for the presence of a file in a .js file on Google App Engine

I'm currently working on implementing an upload button for users to upload files to our storage system using Google App Engine with Python, as well as HTML and JavaScript for the views. To achieve this, we have an HTML file and a.js script that promp ...

Struggling to access a JSON file using Angular framework

I'm currently working with the following JSON and controllers: JSON Format: {"tomcatLogDir":"C:\\apache-tomcat-7.0.70\\logs","tomcatLogs":["1.log","2.log","3.log"]} Factory: app.factory('filesFactory', [ '$http&a ...

Tips for arranging five images side-by-side in a row

I have a collection of 5 images: Image 1: Image 2: Image 3: Image 4: Image 5: The dimensions of each image are as follows: Image 1: 70x40 Image 2: 80x42 Image 3: 90x44 Image 4: 100x46 Image 5: 120x48 I would like to arrange these images ...

What methods can be used to create a universal JS function for popup windows?

How can I create a more flexible code structure? I have successfully implemented the functionality using the following approach: let popup1 = document.getElementById("popup-1"); function openPopup1() { popup1.classList.add("open-popup& ...

Ensure that the navbar remains within the container as you scroll down the page

With the implementation of bootstrap 4, I have successfully integrated a fixed navbar inside a container. Initially, at the top of the page, it occupies the full width, but as soon as I start scrolling, it smoothly transitions into the confines of the cont ...

Exploring the World with the vue-i18n Plugin

Recently, I have integrated translation into my app and now I am looking to implement a button event that allows users to change the language on the home page. For this task, I referred to two tutorials: Localization with Vue and Localization with Vue Tut ...

Activate a button only when a value is inputted into a text box associated with a chosen radio button

I'm facing a challenge with my radio buttons and sub-options. When a user selects an option, the corresponding sub-options should be displayed. Additionally, I want to enable the next button only when text is entered in all sub-option text boxes for t ...

Tips for combining text and variable outcomes in printing

I created a calculator that is functioning correctly and displaying results. However, I would like to include a text along with the results. For example: You spent "variable result" dollars in the transaction. Currently, the results are shown only after ...

Double Row Navbar Struggles in Bootstrap 4

I have been experimenting with creating two bootstrap navbars. The first one features the website's domain name in the center, accompanied by a dropdown menu to navigate to other sections. Each of these sections has its own subbar containing specific ...

Struggling with Dreamweaver template and library issues

As I revamp a website, Dreamweaver templates and libraries are my go-to tools for maintaining a consistent design across all pages. Almost done with the redesign, I'm now seeking feedback from colleagues. To achieve this, I attempted to copy the site ...

Using JavaScript Object Constructor to alter text color

Seeking some guidance as a newbie here on how to deal with a problem I'm currently tackling. I understand that using an object constructor may not be the most efficient way to handle this, but I'm eager to enhance my knowledge of objects. My quer ...

Verify if there is a date present within the JSON entity

I have a PHP array containing date strings and I want to validate them using a native HTML5 date input element. To achieve this, I have converted the date array into a JSON object for use with JavaScript: <script> var date_array = <?php echo json ...

What's causing this javascript to malfunction on the browser?

I encountered a problem with the code in my .js file. Here is a snippet of the code: $.extend(KhanUtil, { // This function takes a number and returns its sign customSign: function(num){ num = parseFloat(num) if (num>=0){return 1} ...

Bootstrap grid button with maximum flexibility

I am currently exploring the intricacies of the bootstrap grid system. My goal is to create a set of buttons that look like this: https://i.sstatic.net/V5meG.png Each button should expand to fill the width and height of its container. However, when a b ...

Having trouble uploading images using ReactJS on the web platform

I am currently in the process of developing a portfolio website using react js, but I'm experiencing an issue where the image I intended to display is not showing up on the live site. Despite thoroughly checking my code, I can't seem to identify ...

Conceal the button briefly when clicked

How can I disable a button on click for a few seconds, show an image during that time, and then hide the image and display the button again? HTML: <input type="submit" value="Submit" onclick="validate();" name="myButton" id="myButton"> <img st ...

Investigating the variety of HTTP 206 responses pertaining to video content

Currently, I am utilizing Amazon CloudFront to serve HTML5 videos. These videos are being requested through HTTP range requests and the expected responses are often in the form of HTTP 206 Partial Content. I have a requirement where I want to log the requ ...