Какая должна быть структура для этого макета?
Кто как адаптивно верстает 50% бэкграунды (слева одна картинка, справа другая)?
Аналогично и тут. Только без after\before картинок)
Бустрап не использую принципиально, поэтому не знаю, как сделать на нем.
Вот так можете попробовать:.wrapper{
                width: 100%;
                min-height: 100vh;
                position: relative;
            }
            .wrapper::before{
                content: '';
                display: block;
                background: #3591d0;
                position: absolute;
                height: 100%;
                width: 50%;
                top: 0;
                left: 0;
                bottom: 0;
            }
            .wrapper::after{
                content: '';
                display: block;
                background: #fff;
                position: absolute;
                height: 100%;
                width: 50%;
                top: 0;
                right: 0;
                bottom: 0;
            }<section class="wrapper">
            <div class="container">
                <div class="row">
                    <div class="col-md-6 col-sm-6 col-xs-6">
                        Левая часть
                    </div>
                    <div class="col-md-6 col-sm-6 col-xs-6">
                        Правая часть
                    </div>
                </div>
            </div>
        </section>