Изменить порядок div на основе устройства из цикла PHP - PullRequest
1 голос
/ 20 марта 2020

Я создаю видеоурок, который будет извлекать ссылку на видео, заголовок, кнопку, ссылку на кнопку из таблицы MySQL.

Для этого у меня есть два Bootstrap <div> с для отображения из PHP петли, одна <div> содержит кнопку, видео и некоторый контент. Нажатие на кнопку показывает видео в VideoSr c <div> и кнопку выбранного в данный момент <li> и скрывает другие. Он работает нормально, но проблема заключается в расположении элементов в мобильном представлении.

Мой код:

<div class="container">
  <div class="row">
    <div class="col-md-5">
      <ul class="list-unstyled video-tutorials no-margin">
        Video titles from loop start
        <li>
          <a href="javascript:void(0)" iframesrc="https://www.youtube.com/embed/VIDEOID" calltoaction="action_1" class="btn btn-lg btn-primary magic">
            <span class="title">VIDEO_TITLE</span><i class="fa fa-play icon-bg "></i
          ></a>
        </li>
        Video titles from loop end
      </ul>
    </div>
    <div class="col-md-7">
      <div class="panel panel-default tutorials no-margin" style="min-height: 490px">
        <div class="panel-body no-padding">
          <!-- Tab panes -->
          <div class="embed-responsive embed-responsive-16by9">
            <iframe id="videoSrc" class="embed-responsive-item" src=""></iframe>
          </div>
          Video Content from loop starts
          <a href="VIDEO_BUTTON_LINK" id="action_VIDEOID" class="btn btn-lg btn-yellow calltoaction" target="_self">VIDEO_BUTTON_TITLE</a>
          Video Content from loop ends
        </div>
      </div>
    </div>
  </div>
</div>

Итак, он показывает кнопки и содержимое <div> рядом, так что на экране компьютера все нормально.

Но на мобильном устройстве сначала отображаются все кнопки в col-md-5 <div>, а затем отображается содержимое col-md-7 <div>. Таким образом, для каждой выбранной кнопки необходимо прокрутить вниз, чтобы увидеть ВИДЕО выбранной кнопки. Итак, я хочу показать выбранное ВИДЕО прямо под нажатой кнопкой.

Есть мысли по этому поводу?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...