What is the method to position a flex column below another?

When viewed on a cell phone, I need the columns to be stacked on top of each other. I'm using Bootstrap 4 with flex divs, utilizing flex columns and rows. I've tried using the order property but it didn't work.

Here is my code:

<div id="menu-text" class="d-flex flex-row">

        <div class="d-flex flex-column col-sm justify-content-center">
          <div class="d-flex flex-row menu-subtitle">Sashomi  </div>
          <div class="d-flex flex-row menu-small-text">[CORTE DE MARISCOS O CARNE CRUDOS]</div>
          <div class="d-flex flex-row menu-mini-text">[FRESH BEEF OR NATURAL SEAFOOD]</div>
          <img src="images/BrochazoBlanco.png" class="white-brush">

          <div class="d-flex flex-row">

            <div class="d-flex flex-column col-md-3">
              <div class="d-flex flex-row">$ 72</div>
            </div>

            <div class="d-flex flex-column col-md-3">
              <div class="d-flex flex-row">$ 50</div>
            </div>

            <div class="d-flex flex-column col-md-6">
              <div class="d-flex flex-row">Sushi california</div>
            </div>
          </div>
        </div>

        <div class="d-flex flex-column col-sm justify-content-center">
          <div class="d-flex flex-row menu-subtitle">Sashimi</div>
          <div class="d-flex flex-row menu-small-text">[CORTE DE MARISCOS O CARNE CRUDOS]</div>
          <div class="d-flex flex-row menu-mini-text">[FRESH BEEF OR NATURAL SEAFOOD]</div>
          <img src="images/BrochazoBlanco.png" class="white-brush">

          <div class="d-flex flex-row">

            <div class="d-flex flex-column col-md-3">
              <div class="d-flex flex-row">$ 72</div>
            </div>

            <div class="d-flex flex-column col-md-3">
              <div class="d-flex flex-row">$ 50</div>
            </div>

            <div class="d-flex flex-column col-md-6">
              <div class="d-flex flex-row">Sushi california</div>
            </div>
          </div>
        </div>

    </div>
cssflexboxbootstrap-4

Answer №1

Feel free to take a look at this example for a simplified and responsive version of the code you provided.

In order to create a three-column grid that is responsive, you can follow this structure:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<div class="container-fluid">
  <div class="row">
    <div class="col-sm bg-secondary">
      One of three columns
    </div>
    <div class="col-sm bg-danger">
      One of three columns
    </div>
    <div class="col-sm bg-success">
      One of three columns
    </div>
  </div>
</div>

You can also view this approach in action by clicking here and resizing the output to see its responsiveness.

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 implementing a CSS style alteration upon clicking a button in a separate HTML page

I created JavaScript quizzes for my users to complete. Once they click the finished button at the end of the quiz, I want to highlight the box on the home page with a green outline to indicate completion. The complete button is located on the challenge1.ht ...

javascripthtmlcss

What is the proper way to correctly populate an input field with an empty value of ""?

I am having an issue where putting value="" inside the input is preventing me from filling in the username and password fields. When I remove the value="", I can fill in the fields, but with value="" present, nothing happens. {/* User */} <div class=" ...

reactjsbootstrap-4

What is the best way to activate an @keyframe animation based on the scrolling action?

I am currently working on an @keyframe animation that rotates a circle along its x-axis, starting from 0 degrees to 90 degrees and then back to 0 degrees. My objective is to synchronize the rotation of the circle with the user's scrolling movement on ...

javascripthtmlcss

How can you make the second block element in a pair stretch to fill the parent element?

I'm currently struggling to make the "rightcol" in the "wrapper" of my data-entry form fill the remaining space next to the second column. Despite successfully displaying the child elements properly, whenever I use the border-bottom attribute, the bor ...

htmlcss

Inject CSS styles into panelgrid on-the-fly

How can I pass a color code property fetched from ebean to a css function? <h:panelGrid id="testpanel" columns="#{message.no_of_columns}" rows="#{message.no_of_rows}" styleClass="dynamicGrid"> <c:forEach items="#{bLDashBoar ...

cssjsf

The mouseenter event in jQuery is failing to trigger

I'm encountering an issue with the mouseenter event on a div section of my webpage. I am attempting to alter the background color of this div when the mouse enters, but it seems to be disregarded. This is the basic HTML code: <div id="services" c ...

javascriptjquerycsshtml

Minimize the number of HTTP requests by including CSS and JS files in PHP

I've been considering a method to reduce the number of HTTP requests made when loading a page by minimizing the amount of downloaded files, while still keeping separate files on the server. The thought process is as follows: <!DOCTYPE html> &l ...

phpjavascriptcssperformanceimport

Hover over the pop-up menu

Struggling with adding mouseover effect to a website created using basic html and css (not html5). Looking to display text with background image when user hovers over a link. Here is an example... REGULAR: ON HOVER: I'm not sure if it's achiev ...

javascripthtmlcssxhtmldhtml

Form fields in Bootstrap 4 will consistently expand downward in the select dropdown menu

When using bootstrap 4, I want my field to always expand downwards and never upwards, even when half the screen is taken up by the form's select element. How can I achieve this effect? I have tried using data-dropup-auto="false" but it didn't wo ...

javascriptcssbootstrap-4

Encountering an issue with the Bootstrap modal popup not functioning properly within a JSP file, implemented alongside the Apache Tiles framework

In my Spring Boot web application, I have incorporated Bootstrap with features like SB Admin and data tables, all of which are functioning correctly. However, I am facing an issue with implementing a Bootstrap modal popup. Below is my JSP code: <%@ ...

javascriptjspbootstrap-modalbootstrap-4apache-tiles

How to scroll a section of a container that's fixed, containing nested flex containers using Vue and TailwindCSS techniques

Looking for some help here! I have an overlay container with a fixed attribute, and inside, I need three flex col divs to sit side by side. In the first flex-col div, I have a div at the bottom containing two components (also flex-cols) that I want to make ...

vue.jsflexboxscrollbarfixedtailwind-css

I am facing difficulties displaying Arabic language characters on my HTML code

I created a website and included the following meta tag in the head section: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> However, all Arabic text appears distorted as shown in the image. Interestingly, when I manually cha ...

phphtmlcss

Manipulate the CSS of a single div within a group of divs that have the same class using jQuery

I'm attempting to modify the CSS of a specific DIV that shares its class with other divs. I've searched for a solution but haven't had any luck so far. Here is the code I've been using without success: $(".singleOffer").click(functio ...

javascriptjqueryhtmlcss

Position the div in the center with overflow properties

After returning to web design as a hobby, I've encountered some difficulties. I'm currently trying to center a div that contains other centered divs. However, when resizing the page, I want to ensure that the divs remain centered and their overfl ...

htmlcsscentering

Update the class name by utilizing template literals

I'm currently in the process of mastering template literals as I have a project where I need to utilize them. However, I seem to be encountering an issue that I can't quite figure out. Here is the code that is currently working: const classes = ...

javascriptcssreactjsmaterial-uistyles

Adjust the size of h1 headings to be smaller than 768px within the

My goal is to have an h1 header within a row, with font awesome mark quotes displayed on the left and right. I am attempting to resize it once the screen width goes below 768px. Here's what I have so far: @media screen and (max-width: 768px) { h1 ...

twitter-bootstrapcss

The CSS is getting overridden by the a:-webkit-any-link user agent stylesheet

I've found myself faced with a page full of lists and links that I need to style individually. No matter what I try, the fonts and colors keep getting overridden by an unknown user agent stylesheet. I've experimented with styling the divs using c ...

htmlcsswebkit

Button with a Jquery icon design

Hello, I am currently working on implementing an icon button that can collapse and expand text. Although I have successfully implemented the logic for collapsing/expanding, I am facing difficulties in creating the actual icon button. The theme I am require ...

javascriptjquerycssjquery-ui

Can a layer be sliced to create a text-shaped cutout?

I want to achieve a cool text effect where the background is visible through the letters. I have explored options with background images and colors, but I haven't found any examples where the underlying layer is revealed. Is this even possible? Imag ...

javascriptjquerycsshtml

The responsiveness of Bootstrap 5 columns in Chrome inspection appears to break after reaching medium size, yet functions properly in other areas

I am currently working with cards within a grid system, but I am encountering an issue with resizing when the column size is smaller than medium in the mobile view inside the inspect section. The width does not expand to 100%, regardless of how much I try ...

htmlcssgoogle-chromebootstrap-5col