In the process of developing a responsive website with the use of bootstrap 3, I am faced with the task of rearranging columns for the mobile version. The layout of the home page has been attached for reference, along with the desired layout for the mobile version. I am seeking guidance on how to achieve this specific mobile layout. Please review the layouts here and here.
Utilizing a different strategy in javascript can be beneficial. The visible and hidden classes from bootstrap are also recommended.
HTML:
<div class="container-fluid" data-toggle="orderColumns" data-target=".column">
<div class="row">
<div class="col-xs-12 col-sm-6 column" data-position="0" data-lg-orderid="1" data-xs-orderid="2">
<h1>
A
</h1>
</div>
<div class="col-xs-12 col-sm-6">
<div class="row">
<div class="col-sm-12 column" data-position="1" data-lg-orderid="0" data-xs-orderid="0">
<h1>
B
</h1>
</div>
<div class="col-sm-12 column" data-position="2" data-lg-orderid="2" data-xs-orderid="1">
<h1>
C
</h1>
</div>
</div>
</div>
</div>
</div>
JS:
$(document).ready(function() {
device = scanDevice();
reorderColumns(device);
});
var reorderColumns = function(device) {
$('*[data-toggle="orderColumns"]').each(function() {
var ctx = $(this),
columnsToOrder = ctx.attr('data-target'),
columns = ctx.find(columnsToOrder),
newOrder = [],
orderId;
$(columns).each(function() {
orderId = $(this).attr('data-'+device+'-orderid');
if(typeof orderId != 'undefined'){
var elementObj = {
id: orderId,
html: $(this).html()
}
newOrder.push(elementObj);
}
})
if(newOrder.length){
$(newOrder).each(function(key,value){
ctx.find('*[data-position="'+ value.id +'"]').html(value.html);
})
}
});
}
var scanDevice = function() {
var windowWdth = $(window).width();
var device = 'lg';
if(windowWdth < 768){
device = 'xs';
} else if(windowWdth >= 768 && windowWdth < 992) {
device = 'sm';
} else if(windowWdth >= 992 && windowWdth < 1200){
device = 'md';
}
return device;
}
Fiddle: https://jsfiddle.net/coheafof/4/
An efficient method (although not the most stylish) to accomplish this task is by employing the .hidden-xs and .visible-lg classes. Utilizing these classes will allow for complete control over the layout on both mobile and desktop versions, but it does involve duplicating the code.
For more information, refer to http://getbootstrap.com/css/#responsive-utilities
Is there a way to create a slim horizontal line without using the <hr> tag ? This is what I attempted: .horizontal-line{ border-top: 1px solid #9E9E9E; border-bottom: 1px solid #9E9E9E; } While it does function, I am hoping for a thinner line. ...
After reviewing numerous questions and answers on this topic, I have yet to find a suitable solution for my issue. Seeking guidance from the community for assistance. Utilizing the Select component from @mui/material to showcase the number of records per ...
At my workplace, I use an HTML file as my email signature footer with IBM Notes. Everything looks great when I create a new email - the logo is positioned correctly, text is styled how I want it, and the overall layout is fine. However, things start to lo ...
I am currently developing an innovative Image hosting platform, and I am faced with a crucial challenge – how can I effectively prevent users from continuously refreshing the form, causing the image to be repeatedly uploaded until my disk space allocat ...
CODE EXAMPLE: <html><body> {section name=a loop=$items} {$items[a].title} {include file="/directory/showstuff.html" video=$items[a]} {/section} </body> </html> PHP SETUP: $pid = '12'; $items = $cbvid->get_c ...
I am facing a challenge when trying to highlight multiple words within a sentence. Specifically, I have text data that looks like this: "The furnishing of Ci Suo 's home astonished the visitors: a home of 5 earthen and wooden structures, it has a sit ...
I am attempting to extract all URLs that have id='revSAR' from the provided HTML tag using a Python regex: <a id='revSAR' href='http://www.amazon.com/Altec-Lansing-inMotion-Mobile-Speaker/product-reviews/B000EDKP8U/ref=cm_cr_dp ...
Is there a way to have the border show up only on the top when hovering over it? Here's the current code I'm using: a:hover { border-top: 3px white; border-style: solid; } Even though this code is in place, the border still appears on ...
I have a pair of buttons, #btn1 and #btn2, as well as two table rows, #tr1 and #tr2. The goal is to toggle the active state of the buttons when they are clicked by the user. The specific requirements are: When the button is set to active, the elements ...
I am looking to create a design similar to the image below using unordered list items. When a user clicks on a list item, I want the circle to fill with color. I have structured it by creating a div with nested list items and span elements. If a user click ...
As part of my project, I need to load an image from my image hosting site by using my github repository. The CSS code I am using for this task is as follows: #main-section{ background-image : url("https://github.com/<mypath>/myphoto.jpg"); } Be ...
I am encountering an issue with a mat-table that retrieves its data from a database. One of the columns needs to be editable by the user so that they can update the content and reflect changes in the database. The problem lies in loading the data into the ...
Encountered an error and struggling to find the issue as everything seems right from my perspective: CSS Code: @font-face { font-family: 'Titillium'; font-style: normal; font-weight: normal; src: url('Titillium.ttf'); ...
I've successfully created a series of data lists that modify the bargraph. Unfortunately, due to their differing x and y values, they end up printing new values on top of existing ones. Shown below is an image illustrating the issue where x and y val ...
Currently, I am working on resolving a sorting issue within one of our applications using Slick Grid for grid implementation. The existing sort function, although functional, presents a challenge. While it successfully sorts columns, the checkbox associate ...
I am facing a challenge with my asp.net page. Whenever a textbox is left empty, I want to hide the entire page from the code behind. The issue arises because there is javascript and jquery code that runs on document ready, accessing data from certain page ...
Utilizing the powerful combination of Angular 5 and Firebase, I have successfully implemented a feature to store and retrieve movie review information. However, an interesting issue arises when it comes to line breaks in the reviews. While creating and edi ...
This code successfully saves the values of departments but is encountering an issue with saving the degree value into MySQL. I am currently using PHP for this functionality. Here is the HTML code: <select class ="form-control" name="depa ...
I'm curious if you have any ideas on how to customize the appearance of a disabled checkbox? For example: <input type="checkbox" value="All Terrain Vehicle" name="exfilter_All Terrain Vehicle" id="exfilter_All_Terrain_Vehicle" ...
I've been looking for a way to convert regular characters (ABC) to full-width characters (ＡＢＣ), but I haven't had any luck so far. That's why I'm turning to you guys for help. Currently, I don't have any JavaScript code writt ...