Reorganizing content for smaller screens using Bootstrap 4

This is an example of the structure of my webpage:

<div class="container new-container">
  <div class="row">
    <div class="col-md-4 info">
    ....
    </div>
    <div class="col-md-8 contact-form">
    ....
    </div>
  </div>
</div>  

On a larger screen, my info section is on the left and my contact form is on the right. However, when I resize the screen to see how it appears on mobile or smaller screens,

The layout changes so that the info area is on one row and the contact form is on the next row, which is the expected behavior.

However, I am noticing that the design looks different as it expects the contact form to be above the info area on smaller screens.

Is there a CSS property or method that allows me to maintain the current layout and keep the order of these elements only on smaller screen resolutions?

Answer №1

For those working with bootstrap 4, the order class can come in handy.

<div class="container new-container">
  <div class="row">
    <div class="col-md-4 order-sm-2 info">
    ....
    </div>
    <div class="col-md-8 order-sm-1 contact-form">
    ....
    </div>
  </div>
</div> 

Check out more details at - https://getbootstrap.com/docs/4.0/layout/grid/#order-classes

For users of bootstrap 3, options like col-sm-pull-* or col-sm-push-* could be useful.

Find out more here - https://getbootstrap.com/docs/3.4/css/#grid-column-ordering

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 updating JS and CSS links for static site deployment

As I develop my static site using HTML files served from a simple web server, I want to use local, non-minified versions of Javascript code and CSS files. However, when it comes time to deploy the site, I would like to refer to minified versions of these s ...

Navigate Behind Slider on Scrolling

My menu bar is going behind the cycle slider when I scroll down. It works fine on other sections but only causes trouble on the slider. I have tried using z-index 1, but it's not working. Can anyone provide a solution? I'm not sure what I'm ...

Is there a way to display data in a checkbox field using PHP and JQuery Mobile?

I am currently working on a challenge in viewsessions.php. My goal is to retrieve multiple values from a database and group them into checkbox fields (such as typeofactivity, employer, date, time, amount as one combined checkbox field) using <input type ...

What are the steps to gather user data and generate a roster of individuals currently online?

I am currently working on a way to gather information about the users who are currently logged into my website. Here's how it works: When a user enters my website, they have the option to choose a nickname using an input box. Then, there are five diff ...

Display items according to the input provided in the form

Consider the following simplified code snippet: <select id="number"> <option value="">Select...</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> ...

What is the reason behind the browser crashing when a scrollbar pseudo-class is dynamically added to an iframe?

1. Insert a new iframe into your HTML: <iframe id="iframe-box" onload=onloadcss(this) src="..." style="width: 100%; border: medium none; "></iframe> 2. Incorporate the following JavaScript code into your HTML file ...

Emulating form functionality: How to programmatically open a link using PHP

Do you want to provide package tracking on your website like DHL does? With DHL, users can track their packages by visiting a specific URL, such as . When a tracking number is entered, it opens a new window with the following format: SOMENUMBER1234 If you ...

Aligning the Twitter and Facebook buttons

Issue with Social Media Button Alignment I'm encountering a problem with aligning Twitter and Facebook buttons on my website. The alignment seems to be off and I need some help fixing it. Code Snippet html: <span id="social"> ...

Scrolling with jQuery to create a fixed navigation bar

I'm having an issue with my navbar on my website. I used CSS and jQuery to keep it fixed at the top, but now when I click on a menu item, it doesn't scroll to that section of the page. Can anyone help me troubleshoot this problem? ...

Need assistance with CSS layout: How to extend a div to the bottom of the page

I am currently working on a design layout that includes a 'header' section with a logo and links, as well as a content area that should extend to the bottom of the page. However, I am facing some challenges in achieving this. Initially, I enclos ...

The vertical menu was added, but the text did not align properly

I pasted a sidebar from a different source https://i.stack.imgur.com/jkYWz.png My goal is to have the text appear at the top of the page, similar to this example https://i.stack.imgur.com/1aR5s.png After adding this line, my text is displaying at the b ...

Illustrating SVG links

I'm working on a basic svg animation project where I want to create a simple shape by animating a line under a menu link. The goal is to have a single line consisting of a total of 7 anchors, with the middle 3 anchors (each offset by 2) moving a few p ...

Learn how to effectively share an image using the Math.random function

Is there a way to display a random number of images on a webpage using JavaScript? Let's say we want to show X number of images, where X is a randomly generated number. For the sake of this example, let's set X to be 10. <input class="randomb ...

Should serverside validation be retained upon the second page load?

As a newcomer to programming, I encountered an issue while working on a form. In the "Preferred way of communication" section, selecting the "Mobile telephone" checkbox dynamically shows the "Confirm mobile number" textbox through my JavaScript code. If I ...

Tips for accessing a specific element within an array of objects

I have an array called options_hotel which contains 2 arrays (but can have more based on fetched data from the database) Both arrays have elements like ID, NOM, and ADRESSE : Array(2) 0: {ID: "1", NOM: "Le messager", ADRESSE: "30 ...

The table does not appear correctly when the data within it is concealed

Table structure appears correctly in Mozilla browser, however it collapses in Chrome. The table data will be populated upon selecting an option from the dropdown menu. I attempted using table-layout: fixed but it did not resolve the issue. ...

What is the best way to utilize Content-Disposition: attachment?

I am new to creating websites and I am trying to make it easier for users to download mp3's from my site by allowing them to left click instead of the traditional right click and save as method. In order to achieve this, I need to set the Content-Disp ...

Hover Link Overlay [CSS / HTML] - An Alternative Style for Link Interaction

I'm having trouble making an image clickable within a hover effect overlay that displays text and a link. I attempted to turn the overlay into a link, but it wasn't successful. http://jsfiddle.net/cno63gny/ Please disregard the placeholder text ...

Is it possible to adjust the background image with properties like Scale to Fill, Aspect Fit, or Aspect Fill?

Is it possible to set the background image using the following properties in HTML? (These are properties used for iOS images, but I am unsure if there are similar ones in HTML): Scale to Fill, Aspect Fit, Aspect Fill https://i.stack.imgur.com/5X83I.jpg ...

Modify the NAME attribute when clicked using Jquery

I am attempting to modify the NAME attribute of a DIV with the text from a textbox using jQuery. Take a look at my code snippet: http://jsfiddle.net/e6kCH/ Can anyone help me troubleshoot this issue? ...