Currently, I am working with Bootstrap 3.x and have two divs assigned as col-lg-6. These divs are referred to as Column X and Column Y.
In the desktop view, Column X is positioned on the left side while Column Y resides on the right side.
My query pertains to adjusting the layout so that when viewed on smaller screen widths, Column Y appears above Column X instead of beside it. How can this be achieved?
In my opinion, rearranging column Y before column X and playing with floating using either pull-right or pull-left is a good strategy. Check out the code snippet below.
@media all and (max-width: 1000px) {
.mobile .col-y {
float: left !important;
}
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container desktop">
<div class="col-xs-6 col-y pull-right">Y</div>
<div class="col-xs-6">X</div>
</div>
<div class="container mobile">
<div class="col-xs-6 col-y pull-right">Y</div>
<div class="col-xs-6">X</div>
</div>You can also achieve the desired layout using only a media query without the need for pull-right. Ultimately, the choice is yours as both approaches are valid. I opted for col-xs-6 due to the small preview window size, but you should customize it according to your needs.
Extremely straightforward:
Develop it to your liking for mobile devices.
Starting with Y first, and then X.
.col-xs-* is designed for smaller mobile screens, while .col-sm-* caters to larger screens.
Utilize .col-xs-12 on both X and Y to ensure Y sits above X on mobile screens.
Implement .col-sm-6 to display X and Y side by side on a larger screen.
Assign the classes X: .pull-left and Y: .pull-right to position X on the left and Y on the right on bigger screens.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="col-xs-12 col-sm-6 pull-right">Y</div>
<div class="col-xs-12 col-sm-6 pull-left">X</div>
</div>If you've found yourself here through a Google search during the Bootstrap 4 era (and beyond), the current method for achieving this is through the utilization of the "order" classes.
Check out the documentation here
Here's an example:
<div class="col-md-6 order-1 order-lg-0">
<!-- I appear second on mobile -->
</div>
<div class="col-md-6 order-0 order-lg-1">
<!-- I show up first on mobile -->
</div>
Keep in mind that this follows a mobile-first design approach, meaning if you set an order at a smaller breakpoint, it will carry over to larger breakpoints unless specified otherwise with the "order-lg-<#>" class.
Good evening, I am having a problem where when I attempt to use PHP to replace "hello world" in an HTML file, it ends up completely empty each time. Can anyone point out what mistake I might be making? Here are the HTML and PHP files: <!DOCTYPE html&g ...
I am struggling with a table setup that includes three columns and multiple rows. The first column contains an image, causing the cells in that row to resize based on the image size. When text is added to the 2nd and 3rd columns, it automatically centers w ...
I am currently utilizing laravel 5.6, vuejs, and Bootstrap 3.3.7 in my project. However, I encountered an issue where adding the file app.js caused my dropdown functionality to stop working, prompting a requirement for popper.js. Upon including popper.js ...
Is there a way to create a 100% height div that can be divided by a draggable border vertically? Take a look at my fiddle to see what I have so far: http://jsfiddle.net/k5rtbzs5/ This is the HTML code: <div class="column"> <div class="top"> ...
Could you provide me with a list of all methods, both with and without packages? Also, I'm interested in knowing why one method is considered better than the others. ...
I'm having trouble getting the shoDetail.html page to open when I submit the code. I even tried entering the complete URL, but it still won't work. Here is the code I am using: <div class="form-group row"> <div class="col-lg-12 col-md-1 ...
Currently, I am developing a straightforward script. Firstly, here is all of the code that I have: <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script type="text/javascript"> function SuperWebF1() { $("#outerd ...
Currently, I am working on a mockup using Bootstrap 4 and have encountered an unusual element inside the container where the background extends beyond the container. I'm not sure how to address this issue effectively. I attempted to use position: abso ...
Why on earth is the body/html or .main div not wrapping my .container div's when the browser width is between 767-960 px?! This is causing horizontal scrolling and I am completely baffled. This should definitely be working! The only code I have is: ...
Struggling to get this animation to function correctly. I have a vertical scrolling page with various sized div elements that change based on the content. The problem is that when these size changes occur, the other elements are moving abruptly. I want to ...
Hello, I am just starting to explore CSS grid. Take a look at the example below: .platform { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); grid-gap: 20px; } .item { width:100%; background-color:#aaa; padding:10 ...
Having some trouble styling a slider using styled-components for React. Specifically, I am unsure how to style the thumb of the slider. Here is the CSS code I have: .faderInput::-webkit-slider-thumb { -webkit-appearance: none; width: 15px; heig ...
I was trying to enclose my div with a tags in the "button" div class, but when I added the a tags with href, it replaced the background-color and text color with Facebook's colors. Can someone please assist me? Below are the HTML codes: footer ...
Hello, I'm currently attempting to implement a CSS Style on an <img> tag that does not have any assigned class or id. Below is my code snippet: ===CSS=== .tgll-navi { //custom class for navigation bar .navi-left { //.navi-left float:right; ...
To create a custom StyleSet in CKEditor using styles from an external stylesheet, I configured the settings as follows: config.extraPlugins = 'stylesheetparser'; config.contentsCss = '/css/externalStyleSheet.css'; config.stylesSet = [ { ...
I have encountered a peculiar problem. It's strange to me because I can't figure out the root cause of it, despite trying everything in the Chrome Developer Tools debugger. Here is a snippet of code that works when I run it from a file on my desk ...
Is there a way to dynamically change CSS property values based on user interaction, such as toggling between dark mode and light mode? I am currently exploring the option of setting up a subscription to track these changes, but I want to know how I can act ...
I'm currently working on disabling a pair of radio buttons in my AngularJS application when a button is clicked. Below is the code snippet for the radio buttons: <div class="col-xs-4 btn-group" id="challenge-radio-btn"> <label class="rad ...
Looking to incorporate a background image from an API response in ReactJS Here is some sample code: useEffect(() => { axios.get(`https://apiaddress=${API_KEY}`) .then(res=>{ console.log(res); setRetrieved(res.data); console.log(retrieved ...
I have a HTML snippet that I want to modify by adding the CSS class HideEdit to hide specific columns. <th class="rgHeader" style="text-align: left;" scope="col" _events="[object Object]" control="[object Object]" UniqueName="Edit"> This particular ...