Solution 1 :

It seems to be enough to set the label which represents your tabs <label class="label" for="tab-1">This is day 1</label> to width: 100%;

You can use Media Queries to apply specific Code Blocks of your CSS-Code only to browsers with a specific/max/min screen/window width.

Solution 2 :

You could rearrange your HTML to have all the tabs first, and then the panels.

This means that you won’t be able to use CSS to control the hiding and showing of the panels. Instead you could use a little bit of JS.

const tabsComponent = document.querySelector(".tabs");
const radios = tabsComponent.querySelectorAll(".input");

radios.forEach(radio =>
  radio.addEventListener("change", e => {
    const id = e.currentTarget.id.split("-")[1];
    const associatedQuery = `#panel${id}`;
    const associatedPanel = document.querySelector(associatedQuery);
    const previouslyShownPanel = tabsComponent.querySelector(`.showPanel`);

    previouslyShownPanel.classList.remove("showPanel");
    associatedPanel.classList.add("showPanel");
  })
);
.trackHolder {
  max-width: 100%;
  margin: 0 auto;
  display: flex;
}

.column {
  margin: 10px;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
}

.trackHolder:nth-of-type(5) .column:first-of-type {
  flex-grow: 2;
  flex-shrink: 2;
  flex-basis: 22px;
}

.trackHolder:nth-of-type(6) .column:nth-of-type(2) {
  flex-grow: 4;
  flex-shrink: 4;
  flex-basis: 66px;
}


/* OTHER STYLES */

html,
body {
  height: 100%;
  box-sizing: border-box;
}

body {
  font-family: "Raleway", sans-serif;
  padding: 10px;
}

.column {
  padding: 10px 0;
  background-color: rgba(255, 0, 0, 0.25);
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.75);
  background-color: #70EA64;
  color: #000000;
}

.time {
  color: #4CAF50;
  font-style: oblique;
  padding-top: 8px;
  margin-right: 9px;
}

.naslovi {
  margin-left: 50px;
  font-size: 23px;
}

.pauzaRucak {
  background-color: #f5f5f5;
}

.pozvPred {
  background-color: #26c6da
}

.track1 {
  background-color: #ffa726;
  color: #000000;
}

.track2 {
  background-color: #B3E5FC;
  color: #000000;
}

.trackOtvaranje {
  background-color: #DB3F24;
  color: #fff;
}

.lokacijaTitle {
  font-size: 16px;
}

.column>p {
  padding: 5px;
}

@media(max-width: 768px) {
  .trackHolder {
    flex-direction: column;
  }
  .naslovi {
    margin-left: 9px!important;
    font-size: 19px!important;
  }
}


/* tabovi */

.tabs {
  display: flex;
  flex-wrap: wrap;
  background: #efefef;
  box-shadow: 0 48px 80px -32px rgba(0, 0, 0, 0.3);
}

.label {
  width: 100%;
  padding: 20px 30px;
  background: #e5e5e5;
  cursor: pointer;
  font-weight: bold;
  font-size: 18px;
  color: #7f7f7f;
  transition: background 0.1s, color 0.1s;
}

.label:hover {
  background: #d8d8d8;
}

.label:active {
  background: #ccc;
  box-shadow: inset 0px 0px 0px 2px #26c6da;
}

.input:focus+.label {
  box-shadow: inset 0px 0px 0px 2px #26c6da;
  z-index: 1;
}

.input:checked+.label {
  background: #fff;
  color: #000;
}

@media (min-width: 600px) {
  .label {
    width: auto;
  }
}

.panel {
  display: none;
  padding: 20px 30px 30px;
  background: #fff;
}

.input {
  position: absolute;
  opacity: 0;
}

.showPanel {
  display: block;
}
<div class="tabs">
  <input checked="checked" class="input" id="tab-1" name="tabs" type="radio" />
  <label class="label" for="tab-1">This is day 1</label>
  <input class="input" id="tab-2" name="tabs" type="radio" />
  <label class="label" for="tab-2">This is day 2</label>
  <div class="panel showPanel" id="panel1">
    <div class="tab-content">
      <section class="trackHolder">
        <h2 class="naslovi">Panel 1 Content</h2>
      </section>
      <section class="trackHolder"><span class="time">08:00</span>

        <div class="column pauzaRucak">I'm baby shabby chic locavore whatever semiotics trust fund raw denim wolf. </div>
      </section>
    </div>
  </div>
  <div class="panel" id="panel2">
    <div class="tab-content">
      <section class="trackHolder">
        <h2 class="naslovi">Panel 2 Content</h2>
      </section>
      <section class="trackHolder"><span class="time">08:00</span>

        <div class="column pauzaRucak">I'm baby shabby chic locavore whatever semiotics trust fund raw denim wolf. </div>
      </section>
    </div>
  </div>
</div>

Problem :

I have a simple schedule, contains two tabs, day 1 and day2. If you set the browser to mobile resoultion, day 1 is on top but another button is below schedule.
What I am trying to achieve is to have that 2 tabs below each other.

.trackHolder {
    max-width: 100%;
    margin: 0 auto;
    display: flex;
}

.column {
    margin: 10px;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0;
}

.trackHolder:nth-of-type(5) .column:first-of-type {
    flex-grow: 2;
    flex-shrink: 2;
    flex-basis: 22px;
}

.trackHolder:nth-of-type(6) .column:nth-of-type(2) {
    flex-grow: 4;
    flex-shrink: 4;
    flex-basis: 66px;
}

/* OTHER STYLES */

html, body {
    height: 100%;
    box-sizing: border-box;
}

body {
    font-family: "Raleway", sans-serif;
    padding: 10px;
}

.column {
    padding: 10px 0;
    background-color: rgba(255, 0, 0, 0.25);
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.75);
    background-color: #70EA64;
    color: #000000;
}

.time {
    color: #4CAF50;
    font-style: oblique;
    padding-top: 8px;
    margin-right: 9px;
}

.naslovi {
    margin-left: 50px;
    font-size: 23px;
}

.pauzaRucak {
    background-color: #f5f5f5;
}

.pozvPred {
    background-color: #26c6da
}

.track1 {
    background-color: #ffa726;
    color: #000000;
}

.track2 {
    background-color: #B3E5FC;
    color: #000000;
}

.trackOtvaranje {
    background-color: #DB3F24;
    color: #fff;
}

.lokacijaTitle {
    font-size: 16px;
}

.column>p {
    padding: 5px;
}

@media(max-width: 768px) {
    .trackHolder {
        flex-direction: column;
    }
    .naslovi {
        margin-left: 9px!important;
        font-size: 19px!important;
    }
}

/* tabovi */

.tabs {
    display: flex;
    flex-wrap: wrap;
    background: #efefef;
    box-shadow: 0 48px 80px -32px rgba(0, 0, 0, 0.3);
}

.label {
    width: 100%;
    padding: 20px 30px;
    background: #e5e5e5;
    cursor: pointer;
    font-weight: bold;
    font-size: 18px;
    color: #7f7f7f;
    transition: background 0.1s, color 0.1s;
}

.label:hover {
    background: #d8d8d8;
}

.label:active {
    background: #ccc;
    box-shadow: inset 0px 0px 0px 2px #26c6da;
}

.input:focus+.label {
    box-shadow: inset 0px 0px 0px 2px #26c6da;
    z-index: 1;
}

.input:checked+.label {
    background: #fff;
    color: #000;
}

@media (min-width: 600px) {
    .label {
        width: auto;
    }
}

.panel {
    display: none;
    padding: 20px 30px 30px;
    background: #fff;
}

@media (min-width: 600px) {
    .panel {
        order: 99;
    }
}

.input:checked+.label+.panel {
    display: block;
}

.input {
    position: absolute;
    opacity: 0;
}
<div class="tabs"><input checked="checked" class="input" id="tab-1" name="tabs" type="radio" /> <label class="label"
            for="tab-1">This is day 1</label>
        <div class="panel">
            <div class="tab-content" id="tab-content1">
                <section class="trackHolder">
                    <h2 class="naslovi">Lorem1</h2>
                </section>

                <section class="trackHolder"><span class="time">08:00</span>

                    <div class="column pauzaRucak">I'm baby shabby chic locavore whatever semiotics trust fund raw denim
                        wolf. </div>
                </section>

                <section class="trackHolder"><span class="time">09:00</span>

                    <div class="column track1">
                        <h5 class="lokacijaTitle">SLorem titile</h5>
                        <small>09:00 10:30</small>

                        <p>HTC 1</p>

                        <p>I'm baby shabby chic locavore whatever semiotics trust fund raw denim wolf. </p>
                    </div>

                    <div class="column track2">
                        <h5 class="lokacijaTitle">ocavore whatever semiotics trust fund raw</h5>
                        <small>09:00 10:30</small>



                        <p>I'm baby shabby chic locavore whatever semiotics trust fund raw denim wolf. </p>
                    </div>

                    <div class="column track3">
                        <h5 class="lokacijaTitle">whatever semiotics</h5>
                        <small>09:00 10:30</small>

                        <p>HTC Cloud</p>

                        <p>ocavore whatever semiotics trust fund raw</p>
                    </div>
                </section>

                <section class="trackHolder"><span class="time">10:30</span>

                    <div class="column pauzaRucak">Launch</div>
                </section>

            </div>
        </div>
        <input class="input" id="tab-2" name="tabs" type="radio" /> <label class="label" for="tab-2">This is day
            2</label>

        <div class="panel">
            <div class="tab-content" id="tab-content1">
                <section class="trackHolder">
                    <h2 class="naslovi">Lorem2</h2>
                </section>

                <section class="trackHolder"><span class="time">08:00</span>

                    <div class="column pauzaRucak">I'm baby shabby chic locavore whatever semiotics trust fund raw denim
                        wolf. </div>
                </section>

                <section class="trackHolder"><span class="time">09:00</span>

                    <div class="column track1">
                        <h5 class="lokacijaTitle">SLorem titile</h5>
                        <small>09:00 10:30</small>

                        <p>HTC 1</p>

                        <p>I'm baby shabby chic locavore whatever semiotics trust fund raw denim wolf. </p>
                    </div>

                    <div class="column track2">
                        <h5 class="lokacijaTitle">ocavore whatever semiotics trust fund raw</h5>
                        <small>09:00 10:30</small>



                        <p>I'm baby shabby chic locavore whatever semiotics trust fund raw denim wolf. </p>
                    </div>

                    <div class="column track3">
                        <h5 class="lokacijaTitle">whatever semiotics</h5>
                        <small>09:00 10:30</small>

                        <p>HTC Cloud</p>

                        <p>ocavore whatever semiotics trust fund raw</p>
                    </div>
                </section>

                <section class="trackHolder"><span class="time">10:30</span>

                    <div class="column pauzaRucak">Launch</div>
                </section>
            </div>
        </div>
    </div>

This what I want to achieve on mobile:

enter image description here

Can somebody help me with this? How can I set tabs buttons below each other?

Comments

Comment posted by jsfiddle.net/ka6vfbzx

@j-doe Still, it’s not good, see jsfiddle:

By