Reorganize tablet layout arrangement with the help of Bootstrap framework

I need help arranging the E & F divs above the C div for tablet view on a webpage I'm currently working on. I've been trying to find a solution, but so far, nothing has worked. Any suggestions would be greatly appreciated.

HTML:

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div class="container-fluid">
  <div class="row flex-container">
    <div style="border: 1px solid white;" class="col-lg-3 col-md-5">A</div>
    
    <div style="border: 1px solid white;" class="col-lg-6 col-md-7">B</div>
    
    <div style="border: 1px solid white;" class="col-lg-3 col-md-12">C</div>
    
    <div class="col-lg-3 col-md-5" style="border: 1px solid white;">D</div>
    
    <div class="col-lg-6 col-md-7" style="border: 1px solid white;">E</div>
    
    <div class="col-lg-3 col-md-12" style="border: 1px solid white;">F</div>
    
  </div>
  
  
</div>

CSS:

.container {
    background-color: white;
    text-align: center;
    padding: 10px;
}

.row > div {
  padding: 10px;
}
 div {
  background-color: #2196F3;
}

CodePen: https://codepen.io/OluwaseunII/pen/rNemVyj

htmlcssbootstrap-4

Answer №1

To determine the order of columns when using flex in Bootstrap, utilize the order-n classes, starting from order-0. You can also specify breakpoints like order-sm-0.

Assign order-0 to col A and order-1 to col B. For the rest, assign two classes - one for the md breakpoint and another for smaller screens.

For instance, col C should have order-2 order-md-4, which means it's positioned 3 on screens up to 768px and 5 for 768px or higher.

Below is an example code where I rearranged cols in the order A B E F C D at the md breakpoint:

.container {
    background-color: white;
    text-align: center;
    padding: 10px;
}

.row > div {
  padding: 10px;
}
 div {
  background-color: #2196F3;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div class="container-fluid">
  <div class="row flex-container">
    <div class="col-lg-3 col-md-5 order-0" style="border: 1px solid white;">A</div>
    
    <div class="col-lg-6 col-md-7 order-1" style="border: 1px solid white;">B</div>
    
    <div class="col-lg-3 col-md-12 order-4 order-md-2" style="border: 1px solid white;">C</div>
    
    <div class="col-lg-3 col-md-5 order-5 order-md-3" style="border: 1px solid white;">D</div>
    
    <div class="col-lg-6 col-md-7 order-2 order-md-4" style="border: 1px solid white;">E</div>
    
    <div class="col-lg-3 col-md-12 order-3 order-md-5" style="border: 1px solid white;">F</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

Having trouble getting my local website to load the CSS stylesheet through Express and Node.js in my browser

https://i.stack.imgur.com/qpsQI.png https://i.stack.imgur.com/l3wAJ.png Here is the app.js screenshot: https://i.stack.imgur.com/l3wAJ.png I have experimented with different combinations of href and express.static(""); addresses. However, I am ...

javascriptcssnode.jsexpressnodes

Using different visual styles for mobile and desktop through media queries with development tools

Whenever I use dev tools to select mobile, my site (width 1440px) looks fine but if I choose desktop, the display is not correct. Do I need a specific media query for desktop devices? The only result that seems to work is when I select mobile-device on dev ...

cssgoogle-chrome-devtoolsmedia-queries

Stay up-to-date with the latest headlines on your Android device!

I am currently developing an Android application and I need to retrieve the most recent news from this specific page, specifically the tab labeled "NYHEDER": Once I have retrieved the news, I plan to display it on the app's screen. I have come acros ...

androidhtmljsoup

What is the best way to showcase information after a specified period?

Is there a way to make a div container appear after a specific time period, let's say 10 seconds? I am using a CLASS instead of an ID. I attempted the following: $(document).ready(function() { $(".contentPost").delay(5000).fadeIn(500); }); As ...

javascriptjqueryhtmlcss

Tips for executing a function on a specific class selector using the document.getElementsByClassName method

When I click on a specific class, I want to implement a fade-out function in JavaScript. However, I am struggling to make a particular class fade out successfully. I attempted to use the this keyword, but it seems like I might be using it incorrectly bec ...

javascripthtmlcss

Use Angular Js to add HTML inner elements to the table

This is my custom HTML code: <body> <div ng-app="tham" ng-controller="tham-control"> <div class="container"> <table class="table table-bordered table-striped"> <thead> ...

jqueryhtmlangularjs

The row does not completely occupy the entire width of the container

My goal is to design a container using Bootstrap. I have successfully added a name and button at the top of the container as a row, set a background color, and included a border. However, there seems to be an issue with the width of the border compared to ...

htmlcssbootstrap-4containers

Difficulty encountered while trying to implement JQuery Typer effect in HTML

I'm new to web development and I'm currently working on my personal website. I've been trying to incorporate a JQuery effect into my site, but I'm facing some difficulties. I came across this code snippet online that supposedly makes it ...

jqueryhtml

CSS - Creating a stylish break line for link boxes

Struggling with creating a box that includes linked text and a line break. However, the issue arises when the line breaks, causing the box to also break. After trying multiple options, I still can't seem to find a solution. Check out my attempt her ...

htmlcssline-breaks

While HTML and CSS collaborate seamlessly during development, CSS mysteriously disappears when transitioning to production mode

I am brand new to this field and I apologize in advance for any mistakes. Currently, I am working on a node.js project using webpack and HTML loader. To test the project, I am utilizing the dev server dependency to run it locally. All models, views, and te ...

htmlcssnode.jsexpresswebpack-4

JavaScript fails to function properly on FireFox

I'm currently troubleshooting a script that works in Chrome but not in FireFox. I suspect it's due to the webkit syntax, so I tried converting it to a standard gradient without success. Can you help me identify what's causing the issue? Web ...

javascriptcss

I am interested in incorporating various forms within this code

I followed an online tutorial to create this code, and I've made some edits myself, mainly related to the buttons that display information. However, I'm still learning and struggling with adding different forms to each section. I would really app ...

javascripthtmlcssdeployment

Encountering a classnotfound exception with JSP JDBC SERVLET, but all code appears to be

index.jsp <%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> < ...

javahtmljspservlets

Having trouble aligning two divs horizontally on the same line in Bootstrap 4

I am facing an issue with my HTML code where I have two div elements that are supposed to be horizontally aligned, but the second div is appearing underneath the first one. To fix this, I tried using bootstrap classes for alignment. <div class="c ...

csstwitter-bootstrapbootstrap-4

Problem encountered on WordPress involving a hyperlink division and a themed backdrop

Currently, I am a student studying web development and assisting a friend with adding custom links and a slider to her WordPress website. The issue we are encountering is that the original developer who created her website six years ago did not set up a ch ...

htmlcsswordpress

Is it possible to implement specific javascript code exclusively on mobile devices?

Is there a way to restrict the execution of specific javascript code to only screen sizes below 900 pixels? My goal is to implement left and right navigation buttons for mobile devices. However, I encountered issues when trying to use matchMedia as it di ...

javascripthtmlcss

Each time I load the page, it displays differently depending on the browser. I'm struggling to understand the reason

Trying to figure out how to make the navigation bar close when a link is clicked and directed to a section instead of a new page. When on a large screen, I want the nav bar to remain open but automatically close when on a small screen (for example, when th ...

javascriptjqueryhtmlcsstwitter-bootstrap

Angular js encountered an unexpected error: [$injector:modulerr] ngRoute

https://i.sstatic.net/PATMA.png In my Angular code, I encountered the error "angular is not defined". This code was written to test the routing concept in AngularJS. var app=angular.module('myApp',['ngRoute']) .config(function ($routeP ...

javascripthtmlangularjsangularjs-routing

What could be the reason my element is not getting cleared as anticipated?

I need some assistance with a simple problem I'm facing. Basically, I have an input field where users can enter a value. I want this value to be added to a <span> element when entered, and removed from the <span> when deleted from the inp ...

javascriptjqueryhtml

Unlock the power of nested dynamic content creation with JavaScript

Every time I attempt to use getelementbyid on a dynamically loaded div, I receive null as the result. This occurs even after trying both window.onload = function () { and $(window).load(function() { index.html: <main > <div id="main-div"> ...

javascriptjqueryhtmldynamicgetelementbyid