Image does not float with bootstrap 4

Navigation
1

I'm trying to make the image stand next to content on devices larger than large but this does not happen:

Follow my code: 

<div class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-6 mt-5 float-left">

                <h2><em>COMO COMPRAR?</em></h2>
                <p>
                    Você pode escolher os bolos e doces de nossa linha fixa, que possui mais de 20 sabores e decorações.
                    Clique acima na categoria "Produtos" para conferir as delícias que oferecemos.
                    Os pedidos devem ser feitos por telefone, com pelo menos 24 horas de antecedência, dependendo da ocasião (datas especiais e feriados). 
                </p>
                <div class="col-xs-12 col-sm-12 mt-5 float-right">
                    <img class="" src="../assets/img/producaoartesanal.png" style="max-width:450px" alt="">
                </div>
            </div>

        </div>
        <div class="row">
            <div class="col-xs-12 col-sm-6 float-left">
                <h2><em>LINHA PERSONALIZADA</em></h2>
                <p>
                    Caso queira um bolo diferente ou personalizado para sua festa, entre em contato conosco com, no mínimo, uma semana de antecedência.
                    Desenhamos e montamos bolos e doces temáticos para todos os tipos de eventos, festas e feiras.Solicite orçamento.
                </p>
            </div>
            <div class="col-xs-12 col-sm-12">
                <img class="float-right" src="../assets/img/ingredientesveganos.png" style="max-width:450px" alt="">
            </div>
        </div>
    
asked by anonymous 11.09.2018 / 13:25

1 answer

1

Its HTML structure was a little disorganized, according to Bootstrap Grid models. I just made small adjustments and now it is according to what I believe to be your idea. It was not necessary to use any CSS, just organizing the HTML and using the default Bootstrap classes got in the way.

What was actually done is a Grid nesting, including an account in the Official Bootstrap Grid documentation link

See the result, and also test on different screen sizes! 

<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />

<div class="container">
	<div class="row">
		<div class="col-12 col-sm-6 mt-5">
			<div class="row">
				<div class="col-12 col-lg-6">
					<h2><em>LINHA PERSONALIZADA</em></h2>
					<p>
						Caso queira um bolo diferente ou personalizado para sua festa, entre em contato conosco com, no mínimo, uma semana de antecedência.
						Desenhamos e montamos bolos e doces temáticos para todos os tipos de eventos, festas e feiras.Solicite orçamento.
					</p>
				</div>
				<div class="col-12 col-lg-6">
					<img class="" src="http://unsplash.it/100/100"style="max-width:450px" alt="">
				</div>
			</div>
		</div>

		<div class="col-12 col-sm-6 mt-5">
			<div class="row">
				<div class="col-12 col-lg-6">
					<h2><em>LINHA PERSONALIZADA</em></h2>
					<p>
						Caso queira um bolo diferente ou personalizado para sua festa, entre em contato conosco com, no mínimo, uma semana de antecedência.
						Desenhamos e montamos bolos e doces temáticos para todos os tipos de eventos, festas e feiras.Solicite orçamento.
					</p>
				</div>
				<div class="col-12 col-lg-6">
					<img class="" src="http://unsplash.it/100/100"style="max-width:450px" alt="">
				</div>
			</div>
		</div>
	</div>
</div>
    
11.09.2018 / 17:31
Get value from the right set with 'ambiguous' fields Exchanging icons on menu button does not show