<div class="col-xs-6 col-lg-2">
<div>A</div>
</div>
<div class="col-xs-12 col-lg-8 ">
<div>B</div>
</div>
<div class="col-xs-6 col-lg-2">
<div>C</div>
</div>
|____A___|_______B_______|_____c____|
|_________B___________|
|____A____|_____C_____|
To achieve this layout, utilize the pull and push responsive helper classes.
When working with Bootstrap 3, which prioritizes mobile responsiveness, always begin designing for the smallest view. Ensure that the order of your columns in the HTML matches the desired sequence for the smallest view: B, A, and C. Assign a size of .col-xs-12 for B and .col-xs-6 for both A and C. Your minimal layout will be well-configured at this point.
For larger layouts, particularly using md, start by allocating fixed column sizes. Since A, B, and C should share the same row totaling 12 columns, set .col-md-6 for B and .col-md-3 for both A and C. Although the column widths are correct, the positions of A and B need adjustment.
To reorder these columns, move A six columns to the left with .col-md-pull-6 and shift B three columns to the right using .col-md-push-3.
.box {
background-color: #f99;
border: 1px solid #c66;
text-align: center;
}<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-6 col-md-push-3"><div class="box">B</div></div>
<div class="col-xs-6 col-md-3 col-md-pull-6"><div class="box">A</div></div>
<div class="col-xs-6 col-md-3"><div class="box">C</div></div>
</div>
</div>P.S. While this method effectively arranges responsive layouts with varying column orders, it may encounter challenges when pushing or pulling columns to different rows. The push and pull classes adjust the position of an element as long as it has a position: relative property, preventing it from wrapping to another row. If necessary, consider duplicating the column and its content while utilizing classes like visible-xs-block to display them appropriately.
It may not be flawless, but it definitely gets the job done:
http://jsfiddle.net/y3gGz9LX/1/
<div class="wrapper">
<div class="col-md-4">
<div>A</div>
</div>
<div id="sectionB" class="col-md-8">
<div>B</div>
</div>
<div class="col-md-4">
<div>C</div>
</div>
</div>
I am facing an issue with aligning a button to a mat drawer located to the right of the screen to ensure a clear overall design. Check out this example How can I achieve this alignment? My current approach involves placing the button inside the drawer an ...
Recently, I encountered a scenario where I needed to automate the creation of a series of CSS classes by utilizing a mixin. This led me to ponder if there is a dynamic approach to achieve this. Essentially, the classes I have are structured as follows: . ...
I am struggling with setting the width of my "picBox" div equal to the image tag inside. I have tried adjusting the CSS code but cannot seem to get it right. Any suggestions on how to solve this issue would be greatly appreciated. Thank you. The CSS code: ...
The issue with the am/pm display is dependent on the browser that the app is opened in. I am looking for a universal solution to ensure it does not appear in any popular browsers. Below is the HTML code for my input time field: <input type="time" for ...
I have a set of automatically generated div containers that contain label and data information. For example: <div class="display-label"> @Html.DisplayNameFor(model => model.BusinessPhone) </div> <div class="display-field"> @H ...
After migrating from Bootstrap 3 to Bootstrap 4 and utilizing sass sources that I compile on the go, I encountered an issue with media switches. Specifically, for @media screen and (min-width: $screen-md-min) { padding: 40px 50px; } An error message ...
I'm currently in the process of working on this page for a project $(function() { $(".modal-launcher, #modal-background").click(function() { $(".modal-content, #modal-background").toggleClass("active"); $(".vid-1i").attr("src", "l ...
I have a functioning menu bar, but when it expands, the content below is pushed down even though it should not be affected. How can I adjust my code to prevent this issue? View my website here: <div id="menu_wrapper"> <div id="menu"> &l ...
I am looking to recreate the effect seen on the background image of this website , where the image gets covered by content as you scroll down. ...
Is there a difference between using left:0; and left:0px;? From what I've noticed, both seem to work fine without any issues in Firefox's error console. Just curious if they have the same interpretation. I am working on some JavaScript that invo ...
Here's the navigation bar code: <nav class="navbar bg-body-tertiary navbar-expand-lg" data-bs-theme="dark" :class="{'navbar-expand-lg navbar-dark bg-dark ' : useDarkNavbar, 'navbar-expand-lg bg-light&a ...
Check out this amazing parallax effect: https://codepen.io/samdbeckham/pen/OPXPNp <div class="parallax"> <div class="parallax__layer parallax__layer__0"> <img src="https://github.com/samdbeckham/blog/blo ...
I am facing an issue with the login button protruding slightly outside the border of a div. Despite trying to adjust the code to align it correctly, the issue persists. .closeWindow{ float: right; margin-left: 15px; /* half the width of the close b ...
Feeling puzzled by a seemingly simple question with no clear solution in sight. We're attempting to transition an interface to an ASP.NET control that currently appears like this: <link rel=""stylesheet"" type=""text/css"" href=""/Layout/CaptchaLa ...
Hey there, I just uploaded a video from YouTube onto my website and noticed that the footer, which is fixed, is being overlapped by the video. Is there any way to resolve this issue? Perhaps some CSS tricks or hacks? Any assistance would be highly appreci ...
The HAML code below is what I have: %header .grid %a{:name => "top"} .logo %a{:href => root_path} =image_tag("logo3.png") .tagline .clearfloat %p Fast Facts About Your Website, Your Competitors And Best ...
In my database, there is a paragraph that looks like this: $str ="this is a paragraph i show shortly and when i click on the view more it will show completely for that i am using the ajax and retrieve it " I display it as follows: this is a paragrap ...
Currently working on a project using Bootstrap 3 and aiming to create a layout similar to the one shown in the image provided: Any suggestions on how to achieve this? Any code snippets would be greatly appreciated. Thank you Experimenting with something ...
I am experiencing an issue with an image that I have built: box Initially, the image appears to be a box with 4 elements inside. However, when I resize the window, the layout gets distorted. I am unsure which property I am using incorrectly, so I will pr ...
I followed a tutorial and created this banner using HTML and CSS. However, I encountered an issue where instead of the banner continuing in loops, it keeps resetting. Since we haven't covered JavaScript yet in university, I'm looking for help to ...