Я создаю видеоурок, который будет извлекать ссылку на видео, заголовок, кнопку, ссылку на кнопку из таблицы 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>
. Таким образом, для каждой выбранной кнопки необходимо прокрутить вниз, чтобы увидеть ВИДЕО выбранной кнопки. Итак, я хочу показать выбранное ВИДЕО прямо под нажатой кнопкой.
Есть мысли по этому поводу?