Changing the order of Bootstrap columns

Below is the code snippet I am using in Bootstrap-

.message-preview {
  background-color: green;
  height:100px;
}
.inbox-preview {
  background-color: blue;
  height:100px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

    <div class = "container">
    <div class = "row">
    <div class = "col-md-4">
    <div class='inbox-preview'>
    
    </div>
    </div>
    <div class = "col-md-8">
    <div class='message-preview'>
    
    </div>
    </div>
    
    </div>
    </div>

This is how it appears on a large screen- https://i.sstatic.net/leLc3.png

For smaller screens, between xs and md widths, I would like it to look like this - https://i.sstatic.net/4vvHv.png

I am seeking help with rearranging the columns accordingly as described above. Your assistance will be greatly appreciated. Thank you!

htmlcsstwitter-bootstrap

Answer №1

If you want to rearrange columns, you can utilize the push and pull classes for column reordering. Check out the official documentation for more details.

Here is a practical example:

.message-preview {
  padding: 50px;
  background-color: green;
  color: white;
}
.inbox-preview {
  padding: 50px;
  background-color: blue;
  color: white;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">

    <div class="col-md-8 col-md-push-4">
      <div class='message-preview'>
        message-preview
      </div>
    </div>

    <div class="col-md-4 col-md-pull-8">
      <div class='inbox-preview'>
        inbox-preview
      </div>
    </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

Manipulate CSS Properties with Javascript Based on Dropdown Selection

I am currently working on implementing a feature that involves changing the CSS property visibility: of an <input> element using a JavaScript function triggered by user selection in a <select> dropdown. Here's what I have so far in my cod ...

javascriptjqueryhtmlcss

Unable to enclose an element with an HTML structure

I am attempting to take all the elements marked with the table tag and envelop them in an HTML structure to make the tables responsive. However, it appears that my current approach is not yielding the desired results. Can you please provide some insight ...

javascripthtmlangulartypescriptdom

Arranging nested divs in relation to one another in a specific position

This code represents a chart in HTML. The goal is to have the second (middle) div start where the first (top) div ends, which has a width of 75px. To achieve this, the margin-left for the middle div is set to 75px in the following styles. Following the sam ...

htmlcss

Changes in an image element's transition can result in either resizing or shifting positions

When I apply an opacity transition to an img element as shown here, I notice that the size of the image changes or it appears to move at the start and end of the transition. Below is a simple CSS code for styling: img{ height:165px; width:165px; ...

htmlcss

What is the best way to enlarge an element when scrolling downwards within the element?

I am looking to create a div that dynamically adjusts its height based on the user's scrolling behavior. The goal is for the div to expand to the very top as the user scrolls downward, and stop when it reaches 70% of the container/parent element. Is t ...

javascripthtmlcss

What's the best way to retrieve the nth row of a div once the mouse hovers over

$(document).ready(function() { $('div').on('mouseover', function() { alert($('div:eq(' + this + ')')); }); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js></ ...

jqueryhtml

Retrieving data from an external PHP script

I'm facing an issue with retrieving results from a PHP file after submitting a form: index.php (located at ) <form id='loginForm' action='http://domain1.com/mail.php' method='POST'> <input id=&apo ...

javascriptphphtml

Utilizing JavaScript to enable a Bootstrap 5 dropdown menu to open on hover for desktop users and be clickable for mobile users

I am currently using Bootstrap 5 to design a website and I'm facing an issue with creating a navbar dropdown. On desktop, I want the dropdown to open on hover and redirect the user to a new page when clicked. However, on mobile devices, I only want th ...

javascripthtmlcssfrontendbootstrap-5

What is the best way to style the currently selected option element in a select dropdown?

I am trying to change the font color of specific option elements within a select dropdown by adding style="color: #D4D4D4". When I apply this style directly to an option element like <option value="TEST" style="color: #D4D4D4">TEST</option>, it ...

javascriptjqueryhtmlcss

Click the button to add content to the top section of the div using jQuery

Looking for some assistance with a web development issue I'm facing. Here's the scenario: I have two sections on my webpage - TOP and BOTTOM. In the bottom section, there are 3 list records each with a checkbox and button. What I need help with ...

javascriptjqueryhtmlcss

Press the button to duplicate the cell column separated by commas

In my HTML table, there is a specific column filled with container numbers that I want to copy to the clipboard when a button is clicked. The column has the class ".container" Here is the code I have been working on. HTML: <button onclick="copyToC ...

javascripthtmljquery

The use of e.preventDefault in Ajax/jQuery is stopping the page from refreshing and preventing the form

Currently, I am experimenting with using ajax/jQuery/php/html to submit my form without reloading the page. If I include e.preventDefault(), the page remains static and the form does not get submitted. When I remove e.preventDefault(), the form gets submi ...

jqueryhtmlajaxforms

I would like to terminate the property when processing it on a mobile device

<div class="col-sm-24 embed-responsive"> <iframe width="100%" src="http://www.youtube.com/embed/${item.snippet.resourceId.videoId}"></iframe> </div> .embed-responsive iframe { height: 185px; margin-top: -4%; paddin ...

javascriptjqueryhtmlcss

Modifying an image with jQuery

Why won't this image change? Below is the relevant HTML, CSS, and jQuery code. HTML <nav id="desktop-nav"> <div class="logo"> <a href="#"></a> </div> <div> ... </div> ... CSS nav#desktop-nav . ...

javascriptjqueryhtmlcss

Using jQuery to remove any HTML tags from user input

I have multiple inputs with text, but they are displaying with unwanted HTML tags. I attempted various solutions without success. Below is my jQuery code to extract data from a table: $(editModal+" #Website").val(n);; Here is an example of my input code: ...

javascriptphpjqueryhtml

React rendering: Injects an equals sign and quotation marks into the async attribute of <script> tag

I recently developed a basic web application using Next.js and React. One of the functional components (referred to as a "page" in Next.js) includes a script tag like this: <script async src="https://example.com/file.js"></script> However, upo ...

htmlreactjsnext.jsjsx

Equally spacing list items in a vertical manner

I've looked everywhere, but none of the suggestions seem to achieve what I need. Essentially, my list is contained within a ul element with a specified height. I want the list items inside to have equal spacing between each other, and in relation to t ...

htmlcss

What is the reason behind Chrome removing an SVG image pattern while utilizing jQuery Draggable?

Currently, I am trying to encapsulate an SVG within a draggable div. The SVG contains a shape or path with an image fill on the face. Surprisingly, it displays perfectly and functions flawlessly in Firefox. However, when it comes to Chrome, the dragging op ...

javascriptjqueryhtmlcsssvg

Unable to execute JavaScript function by clicking

I've tried everything, but I can't seem to change the button text when selecting an item in the "Requirements" dropdown. You can view the issue on this site. Located at the bottom of the page is the "Requirements" dropdown. Each item has an oncl ...

javascriptphpjqueryhtml

Persist user input even after reloading the page

In order to enhance the user experience, I would like to implement a feature where the data entered by the user is preserved even if they refresh, reload, or close the page. This includes retaining the selections made in the select elements. Additionally, ...

javascripthtmljquerycss