Rearranging columns in Bootstrap 4 beta across multiple containers

Sorry for any language issues in my English.

This shows my regular grid: 

-------------------------------
|    A    |    B    |    C    |
-------------------------------
|     D (horizontal menu)     |
-------------------------------

Is it possible to display like this for XS screen?

---------
|A      |
---------
|D menu |
---------
|B      |
---------
|C      |
---------

Check out the sample code here

If rearranging between containers is not an option, how can I achieve this using JavaScript?

javascriptbootstrap-4

Answer №1

To fix the Bootstrap flex issue, you can rearrange your code slightly by moving the .menu element above the container and using the order property like so:

<div class="container-fluid">
    <div class="row d-flex ">
        <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 order-md-1 order-sm-1 order-1" style="height:100px;background-color:#a5a5ff;">A</div>
        <div class="col-xs-12 col-sm-7 col-md-5 col-lg-5 order-md-2 order-sm-3 order-3" style="height:100px;background-color:#fd7a7a;">B</div>
        <div class="col-xs-12 col-sm-5 col-md-3 col-lg-3 order-md-3 order-sm-4  order-4" style="height:100px;background-color:#7cd298;">C</div>
        <div class="col-sm-12 order-md-4 order-sm-2 order-2 menu">D (ul li horizontal menu)</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

Real-time data and dynamic checkbox functionality in AngularJS

I am working on an onclick function that involves data stored in objects. $scope.messages = [ {"id": "1"}, {"id": "2"}, {"id": "3"}, {"id": "4"}, ]; $scope.selection = { ids: {} }; $scope.sendMe = function(message) { //send the data with `id` and ...

javascriptangularjscheckbox

Finding the index of a nested div element with a click event using jQuery

I'm currently working on a click event to retrieve the index of the outermost parent div, but I'm facing some difficulties in getting it to work. Here is a snippet showcasing a list of several divs: <div class="owl-item"> <div class= ...

javascriptjquery

No assets detected in sails.js

Recently, I began a new sails project using 'sails new project --linker'. Initially, everything was functioning correctly but today I encountered a problem. Every time I start the server with 'sails lift', I now receive a 404 error for ...

javascriptnode.jsgruntjssails.js

The node.js server responds with undefined after an AJAX request

Currently, I am facing a challenge in retrieving and accessing a string that is produced by a serverside function in Node.js. function createString () { do something ... console.log(finalString); return finalString; }; To fetch this string f ...

javascriptnode.jsajaxexpressasynchronous

How can you retrieve the <head> content from a remote website without being able to make any changes to that site?

Imagine I need to access the <head> tag of a remote website like YouTube. Whenever I attempt this, I encounter an error message: Access to XMLHttpRequest at ‘Website I am trying to access for the head section’ from origin ‘My Website’ has b ...

javascriptjquerygoogle-chrome-extensionxmlhttprequestcross-domain

Obtain one option from the two types included in a TypeScript union type

I am working with a union type that consists of two interfaces, IUserInfosLogin and IUserInfosRegister. The TUserInfos type is defined as the union of these two interfaces. export interface IUserInfosLogin { usernameOrEmail: string; password: string; } ...

javascriptreactjstypescript

After a successful login, learn how to implement a bottom tab menu in React Native

I'm diving into the world of react-native and finding myself a bit lost when it comes to routing and navigation. I have 4 screens - Login, Register, Home, and Links. The Register and Login screens are all set up, with the ability to navigate back usin ...

javascriptreactjsreact-nativereact-native-navigation

React.js encountered an error: Unexpected "<" token

My journey with react.js has just begun. I am currently using Webstorm for development. I have encountered an error that I am struggling to solve. It seems like React is not being recognized even after trying to install various npm react packages. Synta ...

javascriptnode.jsreactjs

Is there a way to automatically close one menu when another is opened by clicking?

When all other search results have failed to solve my issue, I resort to posting my own question. My problem involves opening hidden submenus in a website's main menu. However, when I open multiple submenus, they just stack above each other. Ideally, ...

javascriptmenudropdown

Is there a way to retrieve the value of an HTML variable using Selenium?

Seeking assistance in determining the progress value of a video using Selenium. I understand that I need to utilize JavaScript executor, but have been unsuccessful in finding a solution so far. The element in question is: <div aria-label="scrub bar" a ...

javascriptjavahtmlselenium

What is the best way to create a dynamic URL linking to an external site in Angular 5?

When attempting to create a link like this: <a [href]="getUrl()">click me</a> getUrl() { return this.domSanitizer.bypassSecurityTrustUrl('http://sampleUrl.com'); } The link is not clickable. When hovering over the ...

javascriptangulartypescriptangular5

JavaScript array error - unrecognized symbol

Hello, I am attempting to generate an array of errors and showcase them all at once. Here is my code: if (!first_name) { var error[] = "Please fill in the Last Name"; $('#first_name').addClass('error'); } else { $('#fi ...

javascriptjqueryarrays

Transform the Standard class into a generic one in typescript

I've created a class that can take JSON objects and transform them into the desired class. Here's the code: import {plainToClass} from "class-transformer"; import UserDto from "../../auth/dto/user.dto"; class JsonConverter { ...

javascripttypescriptclassclass-transformer

When executing code in React JS, I encountered no errors, but the output did not match my expectations

I am facing a challenge with running the Hello World program in React JS using webpack. Attached below is the project structure for reference: https://i.stack.imgur.com/tQXeK.png Upon executing the npm run dev command in the CLI, the browser launches bu ...

javascriptnode.jsreactjswebpack

An unusual 'GET' request has been made to the '/json/version' endpoint in Express.js

Hey there, I'm facing a challenge with my Express project. For some reason, I keep receiving a 404 error due to a mysterious GET request to '/json/version'. The request seems to bypass the defined routers after adding session data and eventu ...

javascriptnode.jsexpressroutes

Leveraging AJAX with React Router

Currently tackling a project utilizing React Router, encountering some challenges with data flow. Each page triggers an AJAX call to fetch data for the component. These calls have been placed within componentDidMount: // The following code is in ES6 comp ...

javascriptajaxreactjsreact-router

Looking for a simple method to link JSON data to an svg element through Javascript?

Looking to harness the power of SVG for a basic graph creation, but uncertain about the process of assigning JSON data dynamically using a 'for loop' to draw rectangles within SVG. Seeking guidance on setting up 1 loop to assign each value for dr ...

javascriptjsonsvg

What is the reason behind receiving the error "PHP Warning: Trying to access property "nodeType" on null" when using this PHP AJAX search function?

I am working on developing a real-time search feature inspired by an example from w3schools, which can be found at this link: https://www.w3schools.com/php/php_ajax_livesearch.asp. My task involves searching through an xml file containing 1000 different it ...

javascriptphpajaxxml

Effortlessly communicate events from a nested component to its parent in Vue 2

In my project, I created a base component called BaseInput.vue which accepts attributes and emits events. To easily bind all attributes, I use the v-bind="$attrs" directive. // BaseInput.vue <template> <label> <input v- ...

javascriptvue.js

Ensure menu options are aligned to the right using material-ui

My material-ui menu currently has the following setup: <span> <Link to="/issues"> <Button style={isActive(history, "/issues")}>Issues </Button> </Link> <Link to="/users"> <Button style={isActive(his ...

javascriptreactjsmaterial-ui