I have some images in bootstrap “row” & “col” div. For Mobile devices I want to turn this into flex-row with horizontal scroll bar.

The caveat is it need to preserve “col” & “row” for desktop devices

Here is sample code for desktop devices

    <div class="row">
        <div class="col-2 setwidth bg-success">Card</div>
        <div class="col-2 setwidth bg-danger">Card</div>
        <div class="col-2 setwidth bg-info">Card</div>
        <div class="col-2 setwidth bg-warning">Card</div>
        <div class="col-2 setwidth ">Card</div>
    </div>

Desktop cols
For mobile devices

    <div class="d-flex flex-row flex-nowrap">
        <div class="col-2 setwidth bg-success">Card</div>
        <div class="col-2 setwidth bg-danger">Card</div>
        <div class="col-2 setwidth bg-info">Card</div>
        <div class="col-2 setwidth bg-warning">Card</div>
        <div class="col-2 setwidth ">Card</div>
    </div>

Mobile cols with horizontal scrollbar

Is there any css solution available.

First I thought two separate “div” for mobile & desktop, It contains images and I don’t know if both the “div” download images twice ?

Second solution I though was using javascript to detect device type and swap “row” class to “d-flex flex-row flex-nowrap” on load, if there is no css solution.