How can I change 2 column layout to a tabbed layout for tablet and mobile

Question

Hi I am updating an old website for a Spanish Cafe. At the moment it uses a 2 column layout for desktop, then a smaller version for tablets and finally a tabbed layout for mobile users:

as this involves 3 layouts there is a lot of repetitive text. What I would like to do is have a responsive design changing from 2 column to tabbed through breakpoints.

Is this possible? I have googled everywhere but cannot find anything.

Answer 1

If anyone should wonder the same thing, here is how I managed to do it (just an example of code).

At the top I hide a div with 2 tabs by display:none ; then I have a flex-container with 2 flex items, left is in Spanish and right in English.

Both display side by side until the viewport gets to 600px the the media-query hides all the english flex items and shows the tab div.

With a bit of javascript the user can toggle between Spanish and English

HTML

<br>
    <div class="wrap">
        <div class="tabh" style="margin:0 auto;">
            <div id="esp" class="atab" onclick="func('a')">Espa&ntilde;ol</div>
            <div id="eng" class="atab" onclick="func2('b')">English</div>
        </div>
        <div class="flex-container">
            <div class="flexitem spanish">Spanish</div>
            <div class="flexitem english">English</div>
        </div>
        <div class="flex-container">
            <div class="flexitem spanish">Spanish</div>
            <div class="flexitem english">English</div>
        </div>
        <div class="flex-container">
            <div class="flexitem spanish">Spanish</div>
            <div class="flexitem english">English</div>
        </div>
    </div>

CSS

.wrap {
    width: 900px;
    max-width: 100%;
    margin: 0 auto;
}

.flex-container {
    width: 100%;
    display: flex;
    margin: 0 auto;
    flex-direction: row;
    justify-content: space-between;
    font-family: Roboto;
    font-weight: bolder;
    color: white;
}

.flexitem {
    text-align: left;
    width: 50%;
    padding: 0 15px;
}

.tabh {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    display: none;
    text-align: center;
    font-family: Roboto;
    font-weight: bolder;
    margin-bottom: 10px;
}

.atab {
    width: 50%;
    height: 25px;
    display: table-cell;
    border-radius: 10px;
    cursor: pointer;
    padding-top: 4px;
    border: 1px solid black;
}

.spanish {
    background-color: red;
    height: 100px;
    margin: 5px;
    text-align: center;
}

.english {
    background-color: blue;
    height: 100px;
    margin: 5px;
    text-align: center;
}

@media only screen and (max-width: 600px) {
    .english {
        display: none;
        width: 100%;
    }
    .spanish {
        width: 100%;
    }
    .tabh {
        display: flex;
    }
    .flex-container {
        flex-direction: column;
    }
}

@media only screen and (min-width: 601px) {
    .spanish {
        display: block !important;
        width: 50%;
    }
    .english {
        display: block;
        width: 50%;
    }
    .tabh {
        display: none;
    }
}

javascript

    function func(a) {
    const esps = document.querySelectorAll('.spanish');
    const engs = document.querySelectorAll('.english');
    esps.forEach(esp => {
        esp.style.display = "block";
    });
    engs.forEach(eng => {
        eng.style.display = "none";
    });
}
    function func2(b) {
    const esps = document.querySelectorAll('.spanish');
    const engs = document.querySelectorAll('.english');
    esps.forEach(esp => {
        esp.style.display = "none";
    });
    engs.forEach(eng => {
        eng.style.display = "block";
    });
}

A working example is here jsfiddle

I hope this helps someone.