My webpage is structured with 3 columns arranged like this :
<div class="row">
<div class="col-lg-3">
<div>**Section 1**</div>
<div>**Section 2**</div>
</div>
<div class="col-lg-6">**Section 3**</div>
<div class="col-lg-3">
<div>**Section 4**</div>
<div>**Section 5**</div>
</div>
</div>
On mobile, I would like to rearrange the sections in a different order as shown in this image: https://i.sstatic.net/BRu7q.jpg
Consider the following 2 alternatives...
Utilize flex direction responsively:
To make use of flexbox column on screens sized lg and larger, the containing row must have a specific height defined. In this instance, 'h-100' (height: 100%;) was employed.
<div class="container vh-100">
<div class="row h-100 flex-lg-column flex-wrap">
<div class="col-lg-3 border flex-grow-1 overflow-auto order-3 order-lg-0">1</div>
<div class="col-lg-3 border flex-grow-1 overflow-auto order-4 order-lg-0">2</div>
<div class="col-lg-6 border order-first order-lg-0 min-vh-100 overflow-auto">3</div>
<div class="col-lg-3 border flex-grow-1 overflow-auto">4</div>
<div class="col-lg-3 border flex-grow-1 overflow-auto order-last order-lg-0">5</div>
</div>
</div>
https://www.codeply.com/go/WDjcxLu5bC
Experiment with flexbox & floats:
This method involves using floats for screens sized lg and above, then switching back to flexbox for smaller displays to enable col ordering when stacked vertically. The layout is also constrained to height:100%.
<div class="row d-lg-block vh-100">
<div class="col-lg-3 float-left d-flex flex-column h-100 p-0">
<div class="flex-grow-1 px-3 border">1</div>
<div class="flex-grow-1 px-3 border">2</div>
</div>
<div class="col-lg-6 float-left border order-first order-lg-0 h-100 overflow-auto">3</div>
<div class="col-lg-3 float-left border h-50">4</div>
<div class="col-lg-3 float-left border h-50">5</div>
</div>
Consider the following basic HTML form: <form name="myForm" action="#sent" method="post" ng-app> <input name="userPreference1" type="text" ng-model="shipment.userPreference" /> <input name="userPreference2" type="text" ng-model="shipm ...
To replicate the issue, you will need to create a project in VS and include the following code: Place this code inside the form tag of the MasterPage, with no code behind. <asp:ScriptManager ID="scmManager" runat="server" AsyncPostBackTimeout="360 ...
Attempting to mimic a login using htmlunit has presented me with an issue despite following examples. The console messages I have gathered are as follows: runtimeError: message=[An invalid or illegal selector was specified (selector: '*,:x' erro ...
I'm having trouble getting the button to toggle the nav bar to work properly. I've gone through similar questions and checked my html, but still can't figure out the issue. Any help would be greatly appreciated! Although I can see all the l ...
I have a list of items with three rows. I want to separate the first and second row with borders, so I added a right border to those items but excluded the third row from having borders. .test-row { display: grid; grid-template-rows: 1fr 1fr 1fr; ...
Recently, I've been experimenting with the developer tools in Chrome to observe the behavior of websites at different moments. It has proven useful in automating certain tasks that I regularly perform. Currently, my focus is on automating the process ...
In my HTML document, there is a button with an onclick method inside a JavaScript <script> tag. When this button is clicked, it triggers the deleteRow function, which is responsible for removing a row from a table on the page. Within the deleteRow f ...
I'm currently working on a project using Three.js where I need to load multiple 3D models and store them in an array. Each model has a corresponding button with a unique ID that when clicked, should add that specific model to the scene and remove any ...
In my current ThreeJS project, I have encountered an issue when trying to swap one texture with another. The problem arises when the UV's become completely distorted after the texture switch. Below is the snippet of code that showcases how I am attemp ...
My website includes various text features, which means that nested blockquotes are a possibility. I am now curious if it is feasible to style nested blockquotes differently from each other! blockquote{ background-color:#666; color:#fff; border ...
I am struggling to use the fontAwesome + icon in the middle of a circle as one item. I have tried placing it inside a circle icon, but it doesn't seem to work properly. import IconFA from 'react-native-vector-icons/FontAwesome'; < ...
I am currently working on my JavaScript skills and would like to implement a fun project involving 10 colorful circles. While I can easily create these circles using HTML and CSS, I require assistance with the interactive functionality using JavaScript. ...
I'm trying to modify a script that includes the following code snippet: <input type="text" name="name" value="Joe Bloggs" onfocus="this.value=''"/> Is it possible to change the background of th ...
I am looking to extract the labels and values of specific textareas and input tags on my website. I don't want to capture all of them, just those within a particular area. For example, I only want to retrieve the values that come after the textarea wi ...
Is it possible to give focus to a parent div that contains a child div without hiding the child div? I am integrating the Google Maps API and need to overlay a grid of transparent divs for inserting information. However, with these divs on top of my map, ...
I have a simple question regarding my datalist setup. I am looking to prevent the input field from showing the list of options until the user starts typing. I want the list to only appear when there are possible matches available based on the user's i ...
Seeking advice on developing a functional contact form using HTML, CSS, and JavaScript. All conditions currently validate properly, but encountering an issue with error messages persisting after re-entering the required fields. Additionally, looking to red ...
I need to securely pass a secret code from my backend to the front end and store it in my JavaScript script. Here is an example of how I want to achieve this: <script> var code = '<%= code %>' </script> Once the us ...
Currently, I am working on a form that includes an input type color. When users click on this input, they see a color picker along with the RGB values of the default color. However, I am wondering if there is a way to set HEX colors as the default instea ...
The tooltip is not appearing as expected, only the title is displaying in the browser. What can be done to fix this? Below is the code snippet: HTML Code: <form action="/validate.php" method="post" id="myform"> <table width="100%" border="1"> ...