Optimizing user experience: Implementing different views/orders for mobile and desktop using Bootstrap

Currently, I am working on creating a dashboard using Bootstrap 4 in combination with Angular 5. However, I have encountered an issue that I can't seem to solve:

Imagine having the following layout on a desktop screen. The code snippet below is a simplified version for better readability. Each card contains additional div elements like card-title and is embedded within Angular components.

You may notice that the two columns are neatly aligned next to the 'larger' card when viewed on a desktop (refer to 'Full page'). But when accessed on mobile devices or portrait tablets, 'card2' and 'card3' are stacked one on top of each other instead of being placed side by side.

I thought about creating a separate view specifically for mobile devices, but I believe there must be a simpler way to handle this without duplicating any code. Unfortunately, I'm unsure of how to achieve this!

If anyone has a cleaner solution for this problem, please share your insights. I've also attempted placing the cards in their own rows on the right side, but it resulted in similar behavior.

htmlcsstwitter-bootstrapbootstrap-4angular5

Answer №1

You have the option to nest card 2 & card 3 within another set of row>cols, eliminating the need for repetitive markup.

https://www.example.com/code-sample

<div class="container-fluid">
    <div class="row">
        <div class="col-12 col-md-9">
            <div class="card" style="height: 300px">
                card1
            </div>
        </div>
        <div class="col-12 col-md-3">
            <div class="row">
                <div class="col-6 col-md-12">
                    <div class="card" style="height: 150px">
                        card2
                    </div>
                </div>
                <div class="col-6 col-md-12">
                    <div class="card" style="height: 150px">
                        card3
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Expandable Hover Navigation Bar with jQuery for Full Page Width Dimension

I currently have a vertical menu on my website and I am looking to implement a dropdown system for some of the links. I came across an example on the internet that inspired me: http://jsfiddle.net/4jxph/3018/ However, I specifically want a full-width subme ...

javascriptjqueryhtmlcssdrop-down-menu

TinyMCE editor does not appreciate being shifted from place to place

While working on my webpage, I encountered an issue with TinyMCE editors when trying to move them within the DOM tree. Strangely, the editor clears itself completely and becomes unusable. This problem seems to be consistent in Safari 4 and Firefox 3.6, but ...

htmldomtinymce

How can I prevent CSS classes from being applied to the submit button in jQuery UI?

Currently, I am utilizing jQuery UI with a customized theme on my website. One issue I have encountered is related to an <input type="submit"> element present on the page. Due to jQuery being active, this button automatically inherits the jQuery UI a ...

cssjquery-uiclass

In the development environment, assets are concealed from view

In the HEAD block of my code, I have the following: {% stylesheets filter='yui_css' output='css/base.css' '@MutualContratosBundle/Resources/public/css/ui/south-street/jquery-ui.css' '@MutualCo ...

phpcsssymfonyassetic

Decoding JavaScript elements embedded in an HTML website

My current HTML site includes the following code: <script type="text/javascript"> jwplayer('player_container').setup( { 'width': '640', ...

javascriptandroidhtmlregexjsoup

The hover effect is being disrupted by the links inside the list item

I'm working on styling an unordered list where each list element contains a frame, background, and an image. I've set it up so that when you hover over a list element, the background changes to orange and the text turns white. However, I ran into ...

htmlcss

How can I retain the value of a String even after clicking the Submit button on a .jsp page?

I am encountering an issue where, after clicking the submit button, I lose the content that was previously stored in my textToConsole variable. Post submission, only "hello" remains in the variable. How can I prevent the loss of the text: "world!"? <% ...

javascriptjavahtmlstringjsp

What are the steps for positioning the floating pane in dojo?

I have successfully created a floating pane declaratively using the code below. Everything seems to be functioning correctly, except for the fact that when I click the button to open the floating pane again, its position changes from the previous locatio ...

htmlcssdojo

Tips for preventing automatic zoom on mobile devices

Check out this link for the test: The current layout of the site is exactly how I want it to be presented. However, I am facing an issue where if I set the viewport meta tag to <meta name="viewport" content="width=device-width, initial-scale=1"> i ...

javascriptjquerycssmobilemeta

No content in Django's Bootstrap dropdown menu

I need assistance with extracting a list of objects and placing them in a dropdown menu. I have successfully achieved this, but the issue seems to be related to my HTML structure. Here is the code snippet from my HTML: <div class="dropdown"> < ...

htmlcssdjangotwitter-bootstrap

Is it possible to resize background images on Safari?

Encountering an issue with Safari where the background isn't scaling properly. It functions perfectly in Firefox, Chrome, and other browsers, but Safari is presenting a problem. Here's a link to the site: This issue occurs when the resolution is ...

jqueryhtmlcss

How do I repeatedly invoke a function in JQuery that accepts two different arguments each time?

I have a collection of folders, each containing various images. The number of pictures in each folder ranges from 8 to 200. Folders are numbered from 1 to 20 and the images within them are also labeled numerically. My goal is to aggregate all these images ...

javascriptjqueryhtml

Is it necessary to send form data back with Express, or is there an alternative solution?

I am facing a simple problem with my handlers for /login get and post requests. Here is the code: loginRender(req, res) { let options = { title: 'Login', layout: 'auth.hbs' } res.render('login', options) } logi ...

javascripthtmlnode.jsformsexpress

How to handle unclickable buttons in Selenium testing

from selenium import webdriver from time import sleep from selenium.webdriver.common.by import By chrome_options = webdriver.ChromeOptions() driver = webdriver.Chrome(r'chromedriver.exe', options=chrome_options) url = 'https://rarible.com/c ...

pythonhtmlseleniumselenium-webdriver

Calculate the sum of two numbers in a Django application and display the result on the same page

I am a beginner in Django and I'm looking to calculate the sum of two numbers, x and y. The values for x and y will be input by the user. Check out my views.py code: from django.shortcuts import render from django.http import HttpResponse def home ...

pythonhtmldjango

Page restrictions are in place because the menu is activated after the template has completely loaded

When you choose the first option - page loading mode - it means stopping the loading process before completion. The page remains partially loaded, displaying only the content that was able to load before the interruption. In contrast, the second option - ...

javascripthtmljquerydjangotemplates

evaluating each element in a list against another

I'm attempting to check if an element exists in another list, but the lists are not in order and they are of different sizes. let list1 = [10 , 4 , 5] let list2 = [4 , 5] I attempted a solution, however it only works when the elements are in the same ...

javascripthtml

Trouble with centering navigation bar using HTML margin:auto

Below is the code snippet I'm currently working on: .nav-item { display: inline; color: white; padding: 30px 10px; font-style: bold; font-family: sans-serif; font-size: 20px; width: 1000px; margin: 0 auto; } .nav-container { back ...

htmlcssmarginnav

Leverage Selenium to scrape the Strava Leaderboard Table

When I try to extract a table from this page, I encounter some difficulties. The goal is to scrape the "This Week's Leaderboard," but extracting the table seems to be challenging. How can I efficiently retrieve the table without resorting to using reg ...

pythonhtmlcssselenium

Tips for avoiding the initial rendering of react components on a page when styled-components are not yet loaded

I have developed a unique custom component library using React and styled-components for creating reusable components. I then imported this library into my nextJS project, but I noticed that the styles from the custom component library are not applied duri ...

htmlreactjsnext.jscomponentsstyled-components