Is there a way to achieve this layout on various screen sizes? The grey rectangles represent divs with content. Picture 1 (left) is for normal widescreen displays, picture 2 (middle) caters to smaller screens like netbooks or tablets, and picture 3 (right) is designed for mobile devices. I am utilizing Bootstrap 3. https://i.sstatic.net/o7zHZ.png
Using the offset column and column ordering classes from Bootstrap can help you arrange your content effectively on different screen sizes.
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
div[class^="col-"] > div {
margin: 1rem 0;
min-height: 100px;
background-color: yellow;
}<div class="container-fluid">
<div class="row">
<div class="col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-0 col-md-push-4">
<div>2</div>
</div>
<div class="col-sm-6 col-md-4 col-md-pull-4">
<div>1</div>
</div>
<div class="col-sm-6 col-md-4">
<div>3</div>
</div>
</div>
</div>Note: The extra DIV in the column DIVs is for illustrative purposes. Customize it as needed for your project.
To achieve this, make use of the
pull push classes offered by Bootstrapcol-*-offset-* classes.
If you want to delve deeper into this topic, visit:
Official Twitter bootstrap documentation
Here's an illustrative example for better understanding:
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="row">
<div class="col-xs-12 col-md-12 col-lg-4 col-lg-push-4" style="height: 100px; background-color: red;">
2
</div>
<div class="col-xs-12 col-md-6 col-lg-4 col-lg-pull-4" style="height: 100px; background-color: blue;">
1
</div>
<div class="col-xs-12 col-md-6 col-lg-4" style="height: 100px; background-color: green;">
3
</div>
</div><div class="row">
<div class="col-xs-12 col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-0 col-md-push-4">2</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-md-pull-4">1</div>
<div class="col-xs-12 col-sm-6 col-md-4">3</div>
</div>
I am working on a webpage with an embedded video and a range slider that serves as a progress bar. Using Javascript, I update the value of the range slider as the video plays, allowing users to navigate through the video content. However, I have encounter ...
I have a dropdown menu, and when a user selects an option, an AJAX call is made to retrieve and display data based on the selected value. If the dropdown value is 2, it triggers the AJAX request. However, I am encountering two issues: https://i.sstatic.n ...
While writing a test case for form submission, I encountered an issue where the Input decorator (e.g. station) value is reassigned during form submission. However, when attempting to define this Input value in the spec file, the component.station value is ...
Here is a snippet of code that includes a <div> element: <div id="specific"> <table cellpadding="2" border="0"> <tr><td>Choose category</td><td><select id="list_categories" runat="server"></select>< ...
I have a headline in my header and in another part of the content. I've been told that this can impact SEO, but I'm just starting out by copying other people's pages and trying to replicate their styles without looking at their code. The st ...
When working with two forms, one for user input and the other as a pop-up window to display results, users sometimes close the pop-up window prematurely if they think there is a network issue causing a delay in data execution. To prevent this, I am consi ...
Take, for instance, my desire to import the following: <link rel="stylesheet" href="mycss.css"> into example_page. I attempted importing it from index.html, but I fear that by doing so, the CSS will be loaded on every page each time I run my app. I ...
I am facing an issue with two dropdowns in my template. Both of them are not functioning properly, one with Thymeleaf attributes and the other without. I have not attempted to change the CSS properties as they were working fine before but now they do not ...
Struggling to create an interactive mind mapping tool using JQuery? One challenge I'm facing is editing the content of a div once it's been set. I've implemented a function that successfully adds text to a div within the (mind-container). H ...
Recently, I encountered an issue with a mysterious JavaScript script that automatically scrolls down when entering the page (I suspect it's JavaScript). I've tried to investigate using Firebug, examining the code, deleting scripts, and even remov ...
I am developing a vuejs component for my project and I am looking to implement a zoom functionality on scroll within a div, similar to Google Maps. <div @scroll="zoomOnScroll"> <Plotly :data="info" :layout="layout" :display-mode-bar="false"&g ...
Looking to dive into the world of css3 design and wondering how to achieve a box-shadow inset with a touch of transparency. Check out the example in this fiddle link: http://jsfiddle.net/TeGkt/4/ Any ideas on how to replicate this effect without relying ...
For the past month, I have been immersed in working on Apache ofbiz (17.12.07) and have developed a custom UI requirement for a client. My goal is to incorporate a side-bar (see screenshot attached below) into all ofbiz modules. To achieve this, I created ...
Within my 'work' array that is generated from an Excel file, I have values for employee_id (referred to as id), projects, and hours. Additionally, I have another array called 'employees' which contains all the employees in my database. ...
I am currently facing an issue with my HTML and CSS code. I have tried to construct a design using a <div> but it resulted in horizontal scrolling and looked chaotic. How can I make the CSS and HTML look the same without any issues? <textarea c ...
Currently, I have a set of LI tags. As users filter the LIs, some may be removed from view. My goal is to assign alternating background colors to the visible LIs. When an LI is visible, it is given the class "LI-Shown." If an LI gets filtered out, I remov ...
The error is occurring despite having the correct xpath in the code: Unable to locate element: {"method":"xpath","selector":"//*[@id='content column']... It seems like there might be multiple xpaths in the field. Here is the code snippet: dr ...
Seeking assistance on media queries for my website. It currently has two responsive viewports: max-width: 414 px (iPhone) and max-width: 770px (iPad) While the style tags are in the correct order in the css document, the cascading nature is causing my ...
I am trying to figure out how to download an image from Instagram, but I cannot seem to programmatically click on the download button of this page. Even after attempting to use XPath and CSS selector methods for clicking, unfortunately, neither seems to w ...
While utilizing FLEX in my code, I noticed that the output is not what I expected on iOS 7/8 devices. <div className="modal-row"> <div className="col1"> <span>{dict.YourServiceNumber}</span> </div> <div ...