Is there a way to move a column into a separate position, but within two different rows of the same column? I have included images below to illustrate my question.
https://i.sstatic.net/i0d4D.png https://i.sstatic.net/xXq6Q.png
I am looking to place "Blue" between "Red" and "Green" specifically for mobile and tablet views.
Your insights are valuable. Thank you!
My approach to this problem involves using Bootstrap and jQuery for a simple example, although I'm not sure how your code looks.
function resized(element) {
const $element = $(element);
const $box3 = $('.box3');
if ($element.width() < 768) {
$box3.insertBefore($(".box2"));
} else {
$(".box3-container").append($box3);
}
}
$(document).ready(() => {
resized(window);
});
$(window).on("resize", e => {
resized(e.target);
})body {
font-family: sans-serif;
}
.box1,
.box2 {
width: 200px;
height: 100px;
color: #fff;
}
.box3 {
width: 300px;
height: 300px;
color: #fff;
}
.box2 {
background: red;
}
.box1 {
background: green;
}
.box3 {
background: blue;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="box-container d-flex flex-column">
<div
class="box1 d-flex justify-content-center align-items-center m-3 text-uppercase"
>
box1
</div>
<div
class="box2 d-flex justify-content-center align-items-center m-3 text-uppercase"
>
box2
</div>
</div>
</div>
<div class="col-md-6 box3-container">
<div
class="box3 6 d-flex justify-content-center align-items-center text-uppercase m-3"
>
box3
</div>
</div>
</div>
</div>Check out the example on Codepen: https://codepen.io/pglejzer/pen/OJVbaXW?editors=1010
I am looking to implement a functionality where the page scrolls to the top of the navigation div ID when a link inside the navigation div is clicked, or ideally even when clicking anywhere within the div itself that contains the navigation links. After r ...
I am experiencing an issue where a fixed header on my website prevents scrolling through sections when hovering, specifically when the setting scrollOverflow: true is enabled. However, everything works fine and scrolling through all sections is possible w ...
I've been attempting to populate a Map in Angular by setting values dynamically. When certain buttons are clicked, the onClick function is invoked. typeArray: Map<number,string>; Rent(movieId: number){ this.typeArray.set(movieId,"Rental ...
I'm attempting to design a webpage without a scrollbar by utilizing CSS3 box-flex. This is my current code: <html> <body style="height:100%;display:-webkit-box;-webkit-box-orient:vertical;"> <!-- height set to 1000px --> <div sty ...
Directory structure: src/index.tsx src/themes/dark.scss src/themes/light.scss ... Customizing webpack with craco: const path = require('path'); module.exports = { webpack: { configure: (webpackConfig, { env, paths }) => { webpa ...
I have created some visually appealing buttons that I am satisfied with, but when a user clicks on one, the text color changes and the button's hover behavior is altered. I utilized this generator to design the buttons: Below is the CSS code for my b ...
I created a quiz page that utilizes a "checkans" function to verify whether the user's answer is correct. My goal is to display a "Correct" message if the answer is right and an "Incorrect" message if it is wrong, all without redirecting to a new page ...
A while back, I inquired about creating a black box with padding around a two-line headline. The solution worked well, except for older versions of Internet Explorer. However, in Firefox, there are occasional issues with the display looking jagged. This oc ...
I'm facing an issue with the layout of items in my view. I have a list of items, and I can display up to 6 items at a time using class="col-md-2". However, when there are more than 6 items, they move to the next row automatically. I want them to be d ...
For example, <select><option>Price</option></select> $sql=mysql_query("SELECT `rug_catagory_id` , `rug_price` FROM `rugs_all_data` WHERE `rug_catagory_id` =1 ...
I am struggling to refresh my table every 5 seconds but haven't been successful. <table width="100%" class="table table-striped table-bordered table-hover" id="dataTables-example"> <thead> <tr> <th>Number</th> ...
Hello there! I have a bootstrap 3 sidebar that seems to be causing some issues in IE 11. Specifically, I am encountering a strange ghosting effect on the border of the sidebar. When the page initially loads, only the bottom edge of the sidebar is visible. ...
I am working on a website built with static HTML pages. My goal is to implement a full-screen loading status complete with a progress bar that indicates the page's load progress, including all images and external assets. Once the page has fully loaded ...
Seeking help to make a div expand and then shrink with one button click. I've tried various methods but the div won't change size. Can someone guide me on why this is happening? Here is the code, CSS, and HTML for my latest attempt: $("dasButto ...
Within a rails application, I have customized the field_error_proc to enable inline error displays as shown below: https://i.sstatic.net/DjmdN.png The code snippet for achieving this functionality is outlined here: ActionView::Base.field_error_proc = pr ...
I am facing a simple issue where I attempted to add marginButtom to the TextFields but for some reason, it is not applying any margin. Please take a look at this codesandbox link CLICK HERE CODE <label>Schedule</label> <Te ...
Working on a verification system where users are redirected to verify their account with an OTP code after signing up. However, I encountered an issue where the code doesn't seem to work as expected and no error messages are being displayed. <?php ...
I recently began using node.js in conjunction with the Express framework, but I'm finding it challenging to remove Jade and other templates from my project. I prefer writing my views in plain HTML. Can anyone provide guidance on how to achieve this? ...
I am running a web server for my basic HTML page that does not have a web icon included in the template. "HTTP/1.1 200 OK" Content-Type: text/html Connection: close <!DOCTYPE html> <html> <head> <met ...
Hey there! I've come across this error in the console while attempting to utilize Bootstrap. It seems that a style is being refused from 'http://127.0.0.1:5500/node_modules/font-awesome/css/font-awesome.min.css' due to its MIME type ('t ...