在React中将不同的组件调用为行

Question

我有一个非常基本的问题，我无法理解并需要一些帮助。我正在为我的个人网站创建一个非常小的React项目。我App.js调用了所有不同的组件，例如header，intro等：

import React from 'react';
import Header from './Header';
import Intro from './Intro';

export default class App extends React.Component {
    render() {
        return (
            <div className="container">
                <div className="row">
                    <div className="col-xs-6">
                        <Header />
                    </div>
                </div>
                <div className="row">
                    <div className="col-xs-6">
                        <Intro />
                    </div>
                </div>
            </div>
        )
    }
}

你可以假设，标题只是页面的顶部，而介绍（目前）只是说了一些文字。这就是它的样子：

第二个组件被第一个组件阻止。有人可以解释React如何使用组件在网页上的呈现方式？或者这只是App.js中的HTML问题？