Использование flex для создания 2 столбцов - ожидаемое поведение не происходит - идеи?

Question

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

Здесьэто оригинальный, неизмененный код:

    <div class="ld-focus-main">

        <?php
        do_action('learndash-focus-masthead-before', $course_id, $user_id );

        learndash_get_template_part( 'focus/masthead.php', array(
            'course_id' => $course_id,
            'user_id'   => $user_id,
            'context'   => 'focus'
        ), true );

        do_action('learndash-focus-masthead-after', $course_id, $user_id ); ?>

        <div class="ld-focus-content">

                <?php do_action('learndash-focus-content-title-before', $course_id, $user_id ); ?>

                <h1><?php the_title(); ?></h1>

                <?php do_action('learndash-focus-content-content-before', $course_id, $user_id ); ?>

                <?php the_content(); ?>

                <?php do_action('learndash-focus-content-content-after', $course_id, $user_id ); ?>

                <?php
                if( is_user_logged_in() && comments_open() ): ?>
                    <div class="ld-focus-comments">
                        <?php
                        do_action('learndash-focus-content-comments-before', $course_id, $user_id );

                        $args = apply_filters( 'learndash_focus_mode_list_comments_args', array(
                            'style' =>  'div',
                            'page'  =>  get_the_ID(),
                            'callback' => 'learndash_focus_mode_comments'
                        ) );
                        wp_list_comments($args);

                        do_action('learndash-focus-content-comments-after', $course_id, $user_id );

                        $args = apply_filters( 'learndash_focus_mode_comment_form_args', array(
                            'title_reply' => __( 'Leave a Comment', 'learndash' ),
                        ) );

                        comment_form($args);

                        do_action('learndash-focus-content-comment-form-after', $course_id, $user_id );
                        ?>
                    </div> <!--/ld-focus-comments-->
                <?php
                endif; ?>

                <?php do_action('learndash-focus-content-comments-after', $course_id, $user_id ); ?>

        </div> <!--/.ld-focus-content-->

    </div> <!--/.ld-focus-main-->

Я сохранил весь этот мусор там, просто чтобы вы видели, что происходит, и, возможно, некоторые из этих вещей влияют.

Вот фактический сайтЯ работаю над:

https://courses.guitar -dreams.com / уроки / введение в триады и их инверсии /

Вот чтоЯ пытаюсь добиться наглядного изображения:

https://drive.google.com/open?id=1RlI62ZjD189r9q3zl8JOcPLU8A_i1FHk

Поэтому, чтобы добавить такую ​​правую боковую панель (и это хорошо работает на узких экранах), я пытаюсь выяснить новые свойства div исвойства контейнера контейнера, которые нужно добавить к приведенному выше коду, чтобы привести к желаемому поведению.

Читал о flexbox и связанных свойствах, и сейчас вот как я пытаюсь это сделать:

<div class = "mywrapper">
    <div class = "mywow" style = "display: flex;
                                  flex-direction: row;
                                  flex-wrap: wrap;
                                  width: 100%;"

        <div class="ld-focus-content" style = " display: flex;
                                                flex-direction: column;
                                                flex-basis: 100%;
                                                flex: 1;">


        </div> 
        <div class = "ld-focus-right_sidebar" style = " display: flex;
                                                        flex-direction: column;
                                                        flex-basis: 100%;
                                                        flex: 1;">
           some stuff
        </div>
   </div>
</div>

Но это только что мой желаемый div боковой панели появляется в bottom. Прежде чем беспокоиться о ширине и других стилях, я просто пытаюсь заставить работать базовую логику и не уверен, почему это не так. Возможно, потому что это WordPress сайт, где у вас так много вложенных div'ов, как и действия с подключаемым модулем и фильтры, влияющие на то, что я пытаюсь сделать. Или я просто пропускаю что-то простое.

То, что я заметил, странно, что структура страницы такова, что сначала добавляется левая боковая панель, затем появляется основной раздел с заголовком (который находится на верхней части боковой панели!), Затемактуальный основной контент. Понятия не имею, почему заголовок не первый, за которым следует существующая левая боковая панель, а затем основной контент. Так что, может быть, это странное структурирование влияет на то, как я пытаюсь это сделать.

Мысли?

Брайан