Reordering Bootstrap 4.1 columns for improved visibility on smaller screens

I'm having trouble adjusting the column order for small screen resolutions in Bootstrap 4.1. I've added the order prefix but nothing seems to be changing. Here is a snippet of my HTML code. Can anyone offer assistance?

<div class="container-fluid office-spaces">
  <div class="col-md-12 col-xs-12 first-layout">
       <div class="col-md-6 order-2 order-md-1">
            <div class="office-spaces-slider"> 
                 <div class="img-wrapper">
                     <img class="img-responsive" src="theme/images/interior2.jpg" alt="interior2">
                    </div>
                </div>
            </div>
            <div class="col-md-4 order-1 order-md-2">
                <div class="col-md-6 col-xs-12">
                    <hr>
                    <h3>OFFICE SPACES</h3>
                </div>
                <div class="col-md-6 col-xs-12">
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed iaculis nibh
                        nibh, quis vehicula neque suscipit at. Sed dictum, sapien ut sagittis posuere,
                        massa metus vulputate lorem, ac egestas erat ante et lorem. Aenean facilisis
                        tincidunt lectus, tristique egestas erat fermentum nec. Vivamus vestibulum
                        metus et dui posuere convallis. 
                    </p>
                </div>
            </div>
            <div class="col-md-2 empty order-3 order-sm-3"></div>
        </div>
    </div>
cssbootstrap-4

Answer №1

When working with bootstrap 4, it's important to know the different column formats for responsiveness:

  • col-* --> designed for mobile portrait mode

  • col-sm-* --> optimized for mobile landscape mode

  • col-md-* --> best suited for ipad portrait mode

  • col-lg-* --> tailored for ipad landscape mode

  • col-xl-* --> ideal for laptop and desktop modes

To ensure your layout is responsive on all devices, combine these formats like this:

<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
</div>

Additionally, remember to always include the .row class after the .container class:

<div class="row">
 //insert your column classes here
</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

What could be causing this jQuery color picker to malfunction when used inside a Bootstrap modal?

Currently, I am utilizing the fantastic jQuery color picker provided by Although it functions as expected in "normal" scenarios, I have encountered an issue where the picker fails to display when the input parent element is nested within a Bootstrap 3 mod ...

javascriptjquerycsstwitter-bootstrap-3

Troubleshooting Problem with Centering Rows in Bootstrap

I am utilizing the most recent version of Bootstrap 3 to design a website for a friend, but I am encountering a challenge with centering elements on the page. Typically, I would use the following code: .center{ width: 90%; margin: 0 auto; } Howev ...

jqueryhtmlcsstwitter-bootstrap-3spacing

Enabling users to create custom layouts by writing CSS that is stored in the database

I am currently in the process of developing a web application using Ruby on Rails that allows users to customize their personal blog pages. I am seeking advice on the most effective ways to achieve this. While I believe Liquid for templating is a good opt ...

ruby-on-railscsstemplates

The alignment issue persists in HTML/CSS despite troubleshooting efforts

I am facing a challenge while attempting to center text within a modal window, despite my efforts the text remains uncentered. This is my HTML code: <div ng-init="modalCompassDir()"> <div class="myModal"> <img class='floor ...

javascripthtmlcss

What is the best way to cut off multiple lines of text and display the remaining strings at the

Currently, I am working on a project that involves implementing a gallery feature. The challenge lies in displaying file names which can be quite lengthy, and we are restricted to showing only 2 lines of text. While this can be achieved using line clamp an ...

cssvue.jsoverflow

Tips on minimizing the vertical size of a mat field housing a mat-select dropdown

I need help reducing the height of a mat field that includes a mat-select in Angular v15. The code is directly from the material components documentation, with no alterations. It consists of a default table and default outline formfield. <mat-form-fi ...

cssangularangular-material

CSS Grid: Dividing items equally based on the number of items present

Currently, I am delving into grid layouts in CSS and experimenting with code to divide a row. Here is the snippet I am playing around with: .grid-sample { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; row-gap: 4rem; padding: 0 5rem ...

csscss-grid

What is the best way to keep the navbar contained within the parent div (hero image) no matter the size of the screen?

After working on adjusting my website layout for different screen sizes, I encountered an issue with the navbar overflowing the parent image when viewed on my laptop. Despite trying both relative and absolute positioning for the .navbar element and setting ...

javascripthtmljquerycss

Adjust and position any svg element to fit the entire viewport

Forgive me for being just another person to ask this question. Despite my efforts, I have yet to find a solution. I am trying to resize "any" svg to fit the entire viewport, centered. Take for example this svg element: <svg baseProfile="full& ...

pythoncsssvgsvgwrite

The frozen first column in a CSS table does not have consistent height with the rest of the row

Having trouble with freezing the first column of a table and aligning the height of the first cell with the rest of the row? Check out the issue in the image below: https://i.sstatic.net/v5xHU.png For a live example, you can also visit this jsfiddle link ...

htmlcss

The icons in webviews on mobile apps (iOS and Android) fail to render correctly

My font icons are behaving inconsistently on webkit-based mobile browsers when used on mobile devices. When hovering over the span on a desktop browser, the icon properly fills its container: https://i.sstatic.net/qzrmz.png However, when hovering over t ...

htmlcsswebviewuiwebviewandroid-webview

Need to conceal certain images in Isotope, but ensure they can easily be revealed when necessary?

I have a collection of various images on my website coded with isotope. My question is, how can I hide specific images that I don't want to display initially, but have them appear when needed? I have managed to create a "show all" list using the code ...

jqueryhtmlcss

What is preventing images from displaying in my slider within baguetteBox?

Currently, I am in the process of incorporating a slider into my website using the baguetteBox library. After consulting the documentation, I successfully implemented an example that is functioning smoothly without any issues. In order to display a series ...

javascripthtmlcssreactjsslider

Creating equality in height among input file fields and other elements with Bootstrap 5

Utilizing a straightforward template to display a registration form with a file attachment field: /* facing an issue when adjusting the height for myself */ .mycustom { line-height: 2.75; z-index: 999; } <!-- <a href="/cdn-cgi/l/email-protecti ...

htmlcssbootstrap-5

Aligning a row with space between columns

I am looking to display 6 divs on my website with a margin between them for aesthetics. In order to maintain the design when resizing the site, I had to specify widths for the columns. However, I am struggling to center all the cols effectively, despite tr ...

jqueryhtmlcsstwitter-bootstrapwrapper

Styling a parent element when it is in focus using CSS3

Is there a way to apply a style to the parent element when an input is in focus? input:focus { background-color:yellow; } For example, if we have the following HTML: <div class="foo"> <input type="text /> Hello </div> I ...

htmlcss

Looking for a solution to a problem with your vertical CSS/jQuery dropdown menu

My web app features a vertical CSS menu that is working correctly except for one minor issue. When I mouse out on all elements with the class a.menutoggle, the last dropdown menu remains open. I am struggling to find a solution to hide it. Can someone plea ...

javascriptjquerycssdrop-down-menu

Inability to input text into a textbox with AngularJS

I am currently working on developing an AngularJS app. I have encountered a problem where I am unable to input text into a textbox. The issue lies with my zoomService which handles zoom increments and decrements. While the user can zoom using a slider and ...

javascripthtmlcssangularjstextbox

What is the correct method to define the width as a percentage while also maintaining a minimum width in pixels?

My header/navigation bar div features a repeat-x background image. Within this, I have a horizontal navigation that needs to be centered over the background with a specified min-width and normal width. I want the navigation to be 80% of the full width, wi ...

htmlwidthbackground-imagecss

Exploring the possibilities of using rem, em, and px for setting image dimensions

I am in need of clarification on the use of different units for image dimensions. Despite my research, I have not been able to find a consistent answer. Some sources suggest using only rem/em instead of pixels, but I am unsure if this also applies to image ...

htmlcss